html5 video etiketinde kaynak değiştirme

Tüm bu cevaplardan nefret ettim çünkü çok kısaydılar veya başka çerçevelere dayanıyorlardı.

İşte bunu yapmanın "bir" vanilya JS yolu, Chrome'da çalışıyor, lütfen diğer tarayıcılarda test edin:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<amp-video id="video" width="320" height="240"></amp-video>

JS:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);

Modernizr benim için bir cazibe gibi çalıştı.

Benim yaptığım şey `kullanmamaktı. Her nasılsa bu işleri berbat etti, çünkü video yalnızca load() ilk kez çağrıldığında çalıştı. Bunun yerine video etiketinin içindeki source niteliğini kullandım ->` ve tarayıcının hangi formatı desteklediğini belirlemek için Modernizr kullandım.

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

Umarım bu size yardımcı olur :)

Eğer Modernizr kullanmak istemiyorsanız, her zaman CanPlayType() kullanabilirsiniz.

Orijinal planınız bana iyi görünüyor. Burada W3 spec notunda belirtildiği gibi, muhtemelen < source > öğelerinin dinamik olarak yönetilmesiyle ilgili daha fazla tarayıcı tuhaflığı bulacaksınız:

Bir video veya ses öğesine zaten eklenmiş olan bir kaynak öğesini ve özniteliğini dinamik olarak değiştirmenin hiçbir etkisi olmayacaktır. Oynatılanı değiştirmek için, doğrudan medya öğesi üzerindeki src niteliğini kullanın, muhtemelen mevcut kaynaklar arasından seçim yapmak için canPlayType() yöntemini kullanın. Genel olarak, belge ayrıştırıldıktan sonra kaynak öğelerini manuel olarak değiştirmek gereksiz [sic] karmaşık bir yaklaşımdır.

http://dev.w3.org/html5/spec/Overview.html#the-source-element

Bunu şu basit yöntemle çözdüm

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

Yeni dosyaları yüklemek için aynı video oynatıcıyı almak yerine, neden tüm <amp-video> öğesini silip yeniden oluşturmuyorsunuz? Çoğu tarayıcı, src'ler doğruysa otomatik olarak yükleyecektir.

Örnek (Prototip kullanılarak):

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);

Spesifikasyona]1 göre

Bir kaynak öğeyi ve özniteliğini dinamik olarak değiştirirken öğesi zaten bir video veya ses öğesine eklenmişse efekt. Oynatılanı değiştirmek için, sadece src niteliğini kullanın. medya öğesini doğrudan, muhtemelen canPlayType() işlevini kullanarak mevcut kaynaklar arasından seçim yapma yöntemi. Genel olarak, belge oluşturulduktan sonra kaynak öğelerin manuel olarak değiştirilmesi ayrıştırılmış olması gereksiz derecede karmaşık bir yaklaşımdır.

Yani yapmaya çalıştığınız şeyin işe yaramaması gerekiyor.

OGG kaynağını en üste taşımayı deneyin. Firefox'un bazen kafasının karıştığını ve oynatmak istediği OGG ilk sırada olmadığında oynatıcıyı durdurduğunu fark ettim.

Denemeye değer.