html5 video etiketi üzerinde kaynak değiştirme

Her yerde çalışan bir video oynatıcı oluşturmaya çalışıyorum. şimdiye kadar ile gidecektim:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(çeşitli sitelerde görüldüğü gibi, örneğin herkes için video ) şimdiye kadar çok iyi.

ancak şimdi diğer videoları seçebileceğim video oynatıcı ile birlikte bir tür oynatma listesi / menü istiyorum. bunlar hemen oyuncumun içinde açılmalıdır. bu yüzden "videonun kaynağını dinamik olarak değiştirmek zorundayım" ( dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - bölüm'de görüldüğü gibi) ") javascript ile. şimdilik flashplayer (ve böylece IE) kısmı hakkında unutmak, ben daha sonra başa çalışacağız.

benim JS <source>etiketleri değiştirmek için şöyle bir şey olmalıdır:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

sorun, bu tüm tarayıcılarda çalışmıyor. yani, firefox = O yaşadığım sorunu gözlemleyebileceğiniz güzel bir sayfa var: http://www.w3.org/2010/05/video/mediaevents.html

load () yöntemini (firefox, mind you) tetikler tetiklemez video oynatıcı ölür.

Şimdi ben birden fazla <source>etiket kullanmadığınızda , ancak bunun yerine <video>etiket içinde sadece bir src özniteliği , her şeyin firefox'ta çalıştığını öğrendim.

benim planım sadece bu src özniteliğini kullanmak ve canPlayType () işlevini kullanarak uygun dosyayı belirlemek .

bir şekilde yanlış mı yapıyorum ya da bir şeyler karmaşık mı?

Tüm bu cevaplardan nefret ettim çünkü çok kısa ya da başka çerçevelere güveniyorlardı.

Chrome'da çalışan "bir" vanilya JS yolu: Lütfen diğer tarayıcılarda test edin:

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

HTML:

<video id="video" width="320" height="240"></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ı.

Yaptığım şey kullanmadım <source>. Her nasılsa bu şeyleri berbat etti, çünkü video sadece ilk kez yük () çağrıldığında çalıştı. Bunun yerine video etiketinin içindeki source özelliğini kullandım -> <video src="blabla.webm" />ve tarayıcının hangi formatı desteklediğini belirlemek için Modernizr'i 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ı olacaktır :)

Modernizr'i kullanmak istemiyorsanız , her zaman CanPlayType () kullanabilirsiniz .

Orijinal planın bana iyi geliyor. Muhtemelen <source>W3 teknik notunda belirtildiği gibi , öğeleri dinamik olarak yönetmeyle ilgili daha fazla tarayıcı tuhaflığı bulacaksınız :

Bir video veya ses öğesine zaten eklenmişse, bir kaynak elemanın ve niteliğinin dinamik olarak değiştirilmesinin bir etkisi olmayacaktır. Oynatılanı değiştirmek için, doğrudan medya öğesindeki src niteliğini kullanın ve büyük olasılıkla kullanılabilir kaynaklar arasından seçim yapmak için canPlayType () yöntemini kullanın. Genel olarak, belge ayrıştırıldıktan sonra kaynak öğelerin manuel olarak manipüle edilmesi gereksiz bir şekilde [sic] karmaşık bir yaklaşımdır.

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

Bunu bu basit yöntemle çözdüm

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

Aynı video oynatıcının yeni dosyalar yüklemesini sağlamak yerine, neden tüm dosyaları silmiyorsunuz? <video> öğeyi silmeyip yeniden oluşturmuyorsunuz. Çoğu tarayıcı, src'ler doğruysa otomatik olarak yükler.

Örnek ( Prototip kullanarak ):

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);

Sadece bir div koyun ve içeriği güncelleyin ...

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

Spec göre

Bir video veya ses öğesine zaten eklenmişse, bir kaynak elemanın ve niteliğinin dinamik olarak değiştirilmesinin bir etkisi olmayacaktır. Oynatılanı değiştirmek için, doğrudan medya öğesindeki src niteliğini kullanın ve büyük olasılıkla kullanılabilir kaynaklar arasından seçim yapmak için canPlayType () yöntemini kullanın. Genellikle, belge ayrıştırıldıktan sonra kaynak öğelerin manuel olarak manipüle edilmesi gereksiz derecede karmaşık bir yaklaşımdır.

Yani yapmaya çalıştığın görünüşe göre işe yaramıyor.

Yaur: Kopyaladığınız ve yapıştırdığınız şey iyi bir tavsiye olmasına rağmen, bu, bir HTML5 video öğesinin kaynak öğesini IE9'da (veya bu konu için IE8'de bile) zarif bir şekilde değiştirmenin imkansız olduğu anlamına gelmez. (Bu çözüm içermez kötü kodlama uygulaması olduğu için tüm video öğesinin değiştirilmesi).

Javascript aracılığıyla HTML5 video etiketlerindeki videoları değiştirmek / değiştirmek için eksiksiz bir çözüm burada bulunabilir ve tüm HTML5 tarayıcılarında (Firefox, Chrome, Safari, IE9 vb.) Test edilmiştir.

Bu yardımcı oluyorsa veya sorun yaşıyorsanız lütfen bize bildirin.

Video kaynağını dinamik olarak değiştirmek için bununla geliyorum. "canplay" olay bazen Firefox'ta ateş etmez, bu yüzden "loadedmetadata" ekledim. Ayrıca varsa önceki videoyu duraklatmak ...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};

Bu benim çözümüm:

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>

<source />FireFox'ta benim için iyi çalışmasına rağmen, özellikle Chrome 14.0.835.202'de etiketleri kullanmak benim için zor oldu. (Bu benim bilgi eksikliğim olabilir, ancak alternatif bir çözümün yine de yararlı olabileceğini düşündüm.) Bu yüzden, sadece bir <video />etiket kullanarak ve src niteliğini video etiketinin kendisinde ayarladım. canPlayVideo('<mime type>')Fonksiyon belirli tarayıcı giriş videoyu oynayabilir olup olmadığını belirlemek için kullanılmıştır. FireFox ve Chrome'da aşağıdakiler çalışır.

Bu arada, hem FireFox hem de Chrome "ogg" biçimini oynatıyor, ancak Chrome "webm" öneriyor. Ben sadece diğer gönderiler FireFox ilk ogg kaynağı tercih (yani <source src="..." type="video/ogg"/>) belirtti çünkü "ogg" tarayıcı desteği için kontrol koymak . Ancak, koddaki siparişin video etiketi üzerindeki "src" ayarını yaparken herhangi bir fark yaratıp yaratmadığını test etmedim (ve son derece şüphe etmedim).

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

JavaScript

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

Bunu bir süredir araştırıyorum ve aynı şeyi yapmaya çalışıyorum, umarım bu başka birine yardımcı olacaktır. Crossbrowsertesting.com kullanıyorum ve kelimenin tam anlamıyla bunu insan tarafından bilinen hemen hemen her tarayıcıda test ediyorum. Şu anda aldığım çözüm Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8'de çalışıyor.

Dinamik Olarak Değişen Kaynaklar

Videonun dinamik olarak değiştirilmesi çok zordur ve bir Flash yedeği istiyorsanız, videoyu DOM / sayfadan kaldırmanız ve Flash'ın dinamik güncellemeleri fark etmeyeceği için Flash'ın güncellenmesi için yeniden eklemeniz gerekir. Dinamik değiştirmek için JavaScript kullanmak için gidiyoruz, ben tamamen kaldırmak istiyorum <source>unsurları ve sadece kullanmak canPlayTypeayarlamak için srcJavaScript ve breakya returnilk desteklenen video türünden sonra ve dinamik flaş var mp4 güncellemek için unutma. Ayrıca, arama yapmadığınız sürece bazı tarayıcılar kaynağı değiştirdiğinizi kaydetmez video.load(). Soruna inanıyorum.load() ilk arayarak çözülebileceğinevideo.pause(). Video öğelerini kaldırmak ve eklemek, kaldırılan videoyu arabelleğe almaya devam ettiği için tarayıcıyı yavaşlatabilir, ancak bir geçici çözüm vardır .

Çapraz Tarayıcı Desteği

Gerçek çapraz tarayıcı kısmına gelince, Video For Everybody'a da geldim . Çözdüğünden çok daha fazla soruna neden olduğu ortaya çıkan MediaelementJS Wordpress eklentisini zaten denedim. Sorunların aslında kütüphane değil Wordpress eklentisinden kaynaklandığından şüpheleniyorum. Mümkünse JavaScript olmadan çalışan bir şey bulmaya çalışıyorum. Şimdiye kadar, bu kadar basit bir HTML buldum:

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

Önemli notlar :

• <source>Mac OS Firefox, ilk olarak bir MP4 ile karşılaşırsa videoyu oynatmayı denemediği için ogg'u ilk olarak koydu <source>.
• Doğru MIME türleri önemlidir .ogv dosyaları olmalıdır video/ogg, değil video/ogv
• HD videonuz varsa, HD kalitesinde OGG dosyaları için bulduğum en iyi kod dönüştürücüsü Firefogg
• .iphone.mp4Dosya iPhone 4 için hangi olacak sadece H.264 Temel 3 Video ve AAC ses ile MPEG-4 videoları oynatmak. Bu format için bulduğum en iyi kodlayıcı Handbrake, iPhone ve iPod Touch ön ayarını kullanmak iPhone 4+ üzerinde çalışacak, ancak iPhone 3GS'nin çalışmasını sağlamak için eklediğim çok daha düşük çözünürlüğe sahip iPod ön ayarını kullanmanız gerekiyor video.iphone3g.mp4.
• Gelecekte , medya sorguları olan mobil cihazları hedeflemek mediaiçin <source>öğeler üzerinde bir özellik kullanabileceğiz , ancak şu anda eski Apple ve Android cihazlar bunu yeterince desteklemiyor.

Düzenle :

• Hala Herkes İçin Video kullanıyorum, ancak şimdi FlowPlayer'ı kullanmaya geçiş yaptım, kontrol etmek için kullanılabilecek harika bir JavaScript API'sı olan Flash yedeklemeyi kontrol etmek için.

Ben benzer bir web uygulaması var ve bu tür bir sorun hiç karşı karşıya değilim. Ne yaptığım böyle bir şeydir:

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

sonra kaynakları değiştirmek istediğinizde böyle bir şey yapan bir işlevi var:

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

Kullanıcı bir çalma listesi üzerinden kendi yolunu yapabilirsiniz, ancak bunu yapmak userAgent kontrol ve daha sonra uygun şekilde bu şekilde yükleyebilirsiniz. İnternette herkes gibi çoklu kaynak etiketleri kullanmayı denedim, ancak çok daha temiz ve tek bir kaynak etiketinin src niteliğini işlemek için çok daha güvenilir buldum. Yukarıdaki kod bellekten yazılmıştır, bu yüzden bazı hte ayrıntılarının üzerine glossed olabilir, ancak genel fikir, uygun olduğunda javascript kullanarak kaynak etiketinin src özniteliğini dinamik olarak değiştirmektir.

OGG kaynağını en üste taşımayı deneyin. Firefox'un bazen kafası karıştığını ve oynamak istediği oyuncuyu durdurduğunu fark ettim, OGG, ilk değil.

Denemeye değer.

Jquery'de yapabileceğiniz başka bir yol.

HTML

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

jQuery

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });

JavaScript ve jQuery kullanma:

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>