Youtube video kaynağı HTML5 video etiketinde gösterilsin mi?


116

HTML5 <video>etiketine bir YouTube video kaynağı eklemeye çalışıyorum , ancak işe yaramıyor. Biraz Google'dan sonra, HTML5'in YouTube video URL'lerini kaynak olarak desteklemediğini öğrendim.

YouTube videolarını yerleştirmek için HTML5 kullanabilir misiniz? Değilse, herhangi bir çözüm var mı?


1
Aşağıda stackoverflow.com/questions/5157377/… tarafından verilen bir IFrame çözümü, geçici çözüm olarak yeterli olacaktır.
S Meaden

Yanıtlar:


15

1.Adım: &html5=TrueFavori YouTube URL'nize ekleyin

2. Adım: <video/>Kaynakta etiketi bulun

3. Adım: controls="controls"Video etiketine ekleyin :<video controls="controls"..../>

Misal:

<video controls="controls" 
       class="video-stream" 
       x-webkit-airplay="allow" 
       data-youtube-id="N9oxmRT2YWw" 
       src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video>

Bazı expireşeyler olduğunu unutmayın. İpin ne kadar srcçalışacağını bilmiyorum .

Hala kendimi test ediyorum.

Düzenleme (28 Temmuz 2011) : Bu video src'nin sayfa kaynağını almak için kullandığınız tarayıcıya özgü olduğunu unutmayın. Sanırım Youtube bu HTML'yi dinamik olarak (en azından şu anda) oluşturuyor, bu nedenle test ederken Firefox'ta kopyalarsam bu Firefox'ta çalışıyor, ancak Chrome'da çalışmıyor.


77
Son kullanma tarihi ve yalnızca belirli bir tarayıcıda çalıştığı gerçeği, bu çözümü oldukça işe yaramaz hale getirir.
pjv

1
TÜM youtube videolarını oynatabilir mi?
Raj Pawan Gumdal

2
YouTube, istedikleri zaman tüm videolarının temelindeki depolama URL'lerini teorik olarak değiştirebilir. srcYukarıdaki öznitelikte sağlanan URL'nin uzun vadede çalışması muhtemelen garanti edilmemektedir.
Chris Peters

1
Evet, faydalı bilgiler ama kulağa kötü bir fikir gibi geliyor. YouTube, herhangi bir zamanda doğrudan video bağlantısına erişimi kapatmaya karar verebilir.
Oliver Moran

36

Bu cevap artık işe yaramıyor, ancak bir çözüm arıyorum.

İtibariyle . 2015/02/24. youtube videolarını indirmenize izin veren bir web sitesi (youtubeinmp4) var, .mp4 formatyoutube videolarını <video>etiketlere yerleştirmekten kurtulmak için bundan (biraz JavaScript ile) yararlanabilirsiniz . İşte bunun eylem halindeki bir demosu .

Artıları

  • Uygulaması oldukça kolay .
  • Aslında oldukça hızlı sunucu yanıtı (videoları almak o kadar da sürmez).
  • Soyutlama (kabul edilen çözüm, düzgün çalışsa bile, yalnızca hangi videoları oynatacağınızı önceden biliyorsanız uygulanabilir, bu, kullanıcı tarafından girilen herhangi bir url için işe yarar).

Eksileri

  • Açıkça youtubeinmp4.comsunuculara ve indirme bağlantısı sağlama yollarına ( <video>kaynak olarak aktarılabilir ) bağlıdır, bu nedenle bu yanıt gelecekte geçerli olmayabilir.

  • Video kalitesini seçemezsiniz.


JavaScript (sonra load)

videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
    var video = videos[i];
    var src = video.src || (function () {
        var sources = video.querySelectorAll("source");
        for (var j = 0, sl = sources.length; j < sl; j++) {
            var source = sources[j];
            var type = source.type;
            var isMp4 = type.indexOf("mp4") != -1;
            if (isMp4) return source.src;
        }
        return null;
    })();
    if (src) {
        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
            id = (id.length > 1) ? id.splice(1) : id;
            id = id.toString();
            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
            video.src = mp4url + id;
        }
    }
}

Kullanım (Tam)

<video controls="true">
    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

Standart video formatı.

Kullanım (Mini)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

Kısaltılmış url'yi doğrudan etikette öznitelik youtu.beolarak kullanarak biraz daha az yaygın, ancak oldukça küçük .src<video>

Umarım yardımcı olur! :)


Güzel işlev ve Mozilla ve Chrome'da çalışıyor, ancak <video>% 100 genişliğe ve 200 piksel yüksekliğe sahipse video genişliği ve yüksekliği nasıl ayarlanır.
Anmol Ratan Mohla

Bu çözümü uyguladım, ancak 2 gün sonra YT engelledi. Artık çalışmıyor. :(
apires

bu maalesef artık çalışmıyor. Eskiden harika çalışıyordu. Umarım bunun için başka bir çözüm vardır!
Chamilyan

19

<video>Etiketi (tarayıcı tarafından farklılık gösterebilir) desteklenen bir biçimde bir videoda yüke kastedilmektedir.

YouTube yerleştirme bağlantıları yalnızca videolar değildir, genellikle kullanıcınızın neyi desteklediğini ve youtube videosunu HTML5 veya flash veya kullanıcıların bilgisayarında bulunanlara bağlı olarak başka bir eklenti kullanarak nasıl oynatabileceklerini algılamak için mantık içeren web sayfalarıdır. Bu nedenle, youtube videolarında video etiketini kullanmakta zorlanıyorsunuz.

YouTube, sayfanıza bir youtube videosu yerleştirmek için bir geliştirici API'si sunar.

Canlı bir örnek olarak bir JSFiddle yaptım: http://jsfiddle.net/zub16fgt/

YouTube API hakkında daha fazla bilgiyi buradan okuyabilirsiniz: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

Kod ayrıca aşağıda bulunabilir

HTML'nizde:

<div id="player"></div>

Javascript'inizde:

var onPlayerReady = function(event) {
    event.target.playVideo();  
};

// The first argument of YT.Player is an HTML element ID. 
// YouTube API will replace my <div id="player"> tag 
// with an iframe containing the youtube video.

var player = new YT.Player('player', {
    height: 320,
    width: 400,
    videoId : '6Dc1C77nra4',
    events : {
        'onReady' : onPlayerReady
    }
});

Yakın zamanda şu sorunu yaşadım: Tam ekran artık iPad'de desteklenmiyor! Sizin jsfiddle örneğiniz göstermek için mükemmeldir: PC'de çalışır, iPad'de çalışmaz. .. Sanırım bununla ilgili yeni bir soru sormalıyım, ama buradaki birisi yorum yapabilir mi?
Snorvarg

1
@Snorvarg Cevabım HTML5 uyumlu herhangi bir tarayıcıda işe yaramalı, iPad'inizde iOS'un oldukça yeni bir sürümünü (10+) çalıştırdığınız sürece çalışmalıdır. Videoyu programlı olarak kontrol etmeniz gerekmiyorsa basit iframe yerleştirme API'sini kullanmayı deneyebilirsiniz. Burada bir örnek bulabilirsiniz developers.google.com/youtube/iframe_api_reference#Examples veya vinayvasyani yanıtını görmek. Hala bir sorununuz varsa, stackoverflow.com/help/how-to-ask adresinde bulunan "İyi Bir Soru Nasıl Sorulur" yönergelerini kullanarak yeni bir soru sorarım .
Norman Breau

@Snorvarg Bu rastladım productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y , Firefox benzer bir konu husul ve tam ekran izinlerini istemek gerekli çünkü çözüldü. Bu yüzden bahse girerim ki tam ekran iPad'inizde çalışmıyor, ne yazık ki iOS Safari desteklemiyor gibi görünüyor. Alternatif bir çözüm, kendi tam ekran düğmenizi eklemek ve iframe oynatıcısını ekranınızın genişliğine / yüksekliğine göre yeniden boyutlandırmaktır.
Norman Breau

1
İpuçlarınız ve bağlantılarınız için teşekkürler. Birkaç gün önce buraya bir soru ekledim: stackoverflow.com/questions/49650040/… Ama bir süre sonra, önerdiğiniz gibi kendi tam ekran düğmesini yapmaya karar verdim ve sorunsuz çalışıyor.
Snorvarg

Harika bir şey, ancak burada açıklandığı gibi "TypeError: YT.Player bir yapıcı değil" hatasıyla karşılaştım: stackoverflow.com/questions/52062169/… . (Tek) cevabın işaret ettiği gibi, bu eşzamansız komut dosyası yüklemesinin ve API'nin çağrıldığında henüz hazır olmamasının sonuçları. Bu, onYouTubeIframeAPIReadyişlevi uygulayarak (ve yukarıdaki kodun son kod bloğunu içine koyarak) önlenebilir .
jakob.j


-3

Hooktube'un yaptığı gibi yapmaya ne dersiniz ? aslında html5 öğesi için video URL'sini değil, bu videoyu çağıran google video yeniden yönlendirici url'sini kullanırlar. burada bazı rastgele videoları nasıl sunduklarına göz atın ...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

kod şu video sayfası içindir https://hooktube.com/watch?v=72UO0v5ESUo

Öte yandan youtube'dan mp3'e, video indirme isteklerinin yarısında download.html döndüren son derece para kazandıran bir canavara dönüştü ... sinir bozucu ...

bu yanıttaki 2 bağlantı, her iki kaynakla ilgili kişisel deneyimlerime ilişkindir. hooktube ne kadar güzel ve taze ve aslında sansür ve coğrafi kısıtlamalardan kaçınmaya yardımcı oluyor .. kontrol edin, oldukça havalı. ve youtubeinmp4 artık ConvertInMp4 olarak bilinen bir açılır pencere canavarıdır ...


-6

Web sitenize gömülü yeni iframe etiketiyle, kod, HTML5'i destekleyen bir tarayıcı kullanıp kullanmadığınızı otomatik olarak algılar.

YouTube videolarını yerleştirmek için iframe kodu aşağıdaki gibidir; Video Kimliğini kopyalayın ve aşağıdaki kodu değiştirin:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>

23
"Yeni" iframeetiket mi? iframe
asırlardır buralarda

11
Bu yanıt için bir çözüm değil, video etiketini açıkça belirtiyor, iframe'i değil ...
TGarrett

7
Belki de OP iframeetiketin varlığından haberdar değildi ve bu yüzden doğrudan videoetiketi sordu . Aksi takdirde, HTML5'in (genel olarak) Youtube videolarını destekleyip desteklemediğini sormazdı, ancak soruyu videoetiketle sınırlandırırdı . Hatta "bunun için herhangi bir çözüm var mı?" Diye sordu. son cümlesinde, bu nedenle bu cevap tamamen geçerlidir.
Daniel Muñoz Parsapoormoghadam

1
Youtube.com videolarını blogger.com bloguma yerleştirmek için, iframe tek uygun çözümdür. Bunun da ötesinde, youtube.com'un ürettiği yerleştirme kodu bir iframe etiketidir. Ayrıca w3schools.com, iframe'leri önerir: http://www.w3schools.com/html/html_youtube.asp . Video etiketinin belirtilmediği yer.
noobninja

1
Sadece merak eden biri varsa ... Sorun, video etiketi kullanmak YouTube videoları için uygun bir yaklaşım değil çünkü YouTube videolarını yerleştirmek için herkese açık URL'ler gerçek bir medya kaynağı değil. Bu nedenle, iframe'leri kullanmayı öneren insanlar var. Bir video etiketi kullanmaya çalışmak, gelecekte değişebilecek özel URL'ler kullanacağınız anlamına gelecektir. Bu, özel bir üyeye nesne yönelimli bir dilde erişmeye çalışmak gibidir. YouTube'un resmi belgelerini buradan görüntüleyebilirsiniz developer.google.com/youtube/iframe_api_reference#Examples
Norman Breau
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.