Ändern der Quelle auf dem HTML5-Video-Tag

Ich versuche einen Videoplayer zu bauen, der überall funktioniert. Bisher würde ich gehen mit:

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

(wie auf mehreren Websites zu sehen, zum Beispiel Video für alle ) so weit, so gut.

aber jetzt möchte ich auch eine Art Wiedergabeliste / Menü zusammen mit dem Videoplayer, aus dem ich andere Videos auswählen kann. Diese sollten sofort in meinem Player geöffnet werden. Also muss ich "die Quelle des Videos dynamisch ändern" (wie auf dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ zu sehen). - Abschnitt "Schauen wir uns einen anderen Film an ") mit Javascript. Vergessen wir vorerst den Flashplayer (und damit den IE) Teil, ich werde später versuchen, damit umzugehen.

Mein JS zum Ändern der <source>Tags sollte also ungefähr so ​​aussehen:

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

Das Problem ist, dass dies nicht in allen Browsern funktioniert. Firefox = O, es gibt eine schöne Seite, auf der Sie das Problem beobachten können, das ich habe: http://www.w3.org/2010/05/video/mediaevents.html

Sobald ich die load () -Methode auslöse (wohlgemerkt in Firefox), stirbt der Videoplayer.

Jetzt habe ich herausgefunden, dass, wenn ich nicht mehrere <source>Tags verwende, sondern nur ein src-Attribut innerhalb des <video>Tags, das Ganze in Firefox funktioniert.

Mein Plan ist es also, nur dieses src-Attribut zu verwenden und die entsprechende Datei mit der Funktion canPlayType () zu ermitteln .

mache ich es irgendwie falsch oder kompliziere ich die Dinge?

Ich hasste all diese Antworten, weil sie zu kurz waren oder sich auf andere Rahmenbedingungen stützten.

Hier ist "eine" Vanilla JS-Methode, die in Chrome funktioniert. Bitte testen Sie sie in anderen Browsern:

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 hat für mich wie ein Zauber gewirkt.

Was ich getan habe ist, dass ich nicht verwendet habe <source>. Irgendwie hat das alles vermasselt, da das Video nur beim ersten Aufruf von load () funktioniert hat. Stattdessen habe ich das Quellattribut im Video-Tag -> verwendet <video src="blabla.webm" />und mit Modernizr ermittelt, welches Format der Browser unterstützt.

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

Hoffentlich hilft dir das :)

Wenn Sie Modernizr nicht verwenden möchten , können Sie jederzeit CanPlayType () verwenden .

Ihr ursprünglicher Plan klingt für mich gut. Sie werden wahrscheinlich mehr Browser-Macken finden, die sich mit der dynamischen Verwaltung der <source>Elemente befassen , wie hier in der W3-Spezifikation angegeben:

Das dynamische Ändern eines Quellelements und seines Attributs, wenn das Element bereits in ein Video- oder Audioelement eingefügt wurde, hat keine Auswirkung. Um die Wiedergabe zu ändern, verwenden Sie einfach das Attribut src direkt für das Medienelement und verwenden Sie möglicherweise die Methode canPlayType (), um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist das manuelle Bearbeiten von Quellelementen nach dem Analysieren des Dokuments ein unnötig komplizierter Ansatz.

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

Ich habe das mit dieser einfachen Methode gelöst

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

Anstatt denselben Videoplayer zum Laden neuer Dateien zu veranlassen, löschen Sie das gesamte <video>Element und erstellen Sie es neu. Die meisten Browser laden es automatisch, wenn die src's korrekt sind.

Beispiel (unter Verwendung eines Prototyps ):

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

Setzen Sie einfach ein div und aktualisieren Sie den Inhalt ...

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

Nach der Spezifikation

Das dynamische Ändern eines Quellelements und seines Attributs, wenn das Element bereits in ein Video- oder Audioelement eingefügt wurde, hat keine Auswirkung. Um die Wiedergabe zu ändern, verwenden Sie einfach das Attribut src direkt für das Medienelement und verwenden Sie möglicherweise die Methode canPlayType (), um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist das manuelle Bearbeiten von Quellelementen nach dem Analysieren des Dokuments ein unnötig komplizierter Ansatz.

Was Sie also versuchen, soll anscheinend nicht funktionieren.

Yaur: Obwohl das, was Sie kopiert und eingefügt haben, ein guter Rat ist, bedeutet dies nicht, dass es unmöglich ist, das Quellelement eines HTML5-Videoelements elegant zu ändern, selbst in IE9 (oder IE8). (Diese Lösung beinhaltet NICHT Ersetzen des gesamten Videoelements, da dies eine schlechte Codierungspraxis ist).

Eine vollständige Lösung zum Ändern / Wechseln von Videos in HTML5-Video-Tags über Javascript finden Sie hier und wird in allen HTML5-Browsern (Firefox, Chrome, Safari, IE9 usw.) getestet.

Wenn dies hilft oder wenn Sie Probleme haben, lassen Sie es mich bitte wissen.

Ich komme damit, um die Videoquelle dynamisch zu ändern. "canplay" -Ereignis wird in Firefox manchmal nicht ausgelöst, daher habe ich "geladene Metadaten" hinzugefügt. Außerdem pausiere ich das vorherige Video, wenn es eines gibt ...

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

Das ist meine Lösung:

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

Die Verwendung der <source />Tags erwies sich speziell in Chrome 14.0.835.202 als schwierig für mich, obwohl es in FireFox für mich gut funktioniert hat. (Dies könnte mein Mangel an Wissen sein, aber ich dachte, eine alternative Lösung könnte trotzdem nützlich sein.) Also habe ich nur ein <video />Tag verwendet und das src-Attribut direkt auf dem Video-Tag selbst festgelegt. DascanPlayVideo('<mime type>') Funktion wurde verwendet, um zu bestimmen, ob der bestimmte Browser das Eingangsvideo abspielen kann oder nicht. Das Folgende funktioniert in FireFox und Chrome.

Übrigens spielen sowohl FireFox als auch Chrome das "ogg" -Format, obwohl Chrome "webm" empfiehlt. Ich habe den Check für die Browserunterstützung von "ogg" nur an erster Stelle gestellt, weil in anderen Posts erwähnt wurde, dass FireFox zuerst die ogg-Quelle bevorzugt (dh <source src="..." type="video/ogg"/>). Aber ich habe nicht getestet (und bezweifle sehr), ob die Reihenfolge im Code überhaupt einen Unterschied macht, wenn ich das "src" auf dem Video-Tag setze.

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

Ich habe dies eine ganze Weile erforscht und ich versuche das Gleiche zu tun, also hoffe ich, dass dies jemand anderem hilft. Ich habe crossbrowsertesting.com verwendet und dies buchstäblich in fast jedem dem Menschen bekannten Browser getestet. Die Lösung, die ich derzeit habe, funktioniert in Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+ und Windows Phone 8.

Dynamisch wechselnde Quellen

Das dynamische Ändern des Videos ist sehr schwierig. Wenn Sie einen Flash-Fallback wünschen, müssen Sie das Video aus dem DOM / der Seite entfernen und erneut hinzufügen, damit Flash aktualisiert wird, da Flash keine dynamischen Aktualisierungen von Flash-Variablen erkennt. Wenn Sie JavaScript verwenden, um es dynamisch zu ändern, würde ich alle <source>Elemente vollständig entfernen und nur verwenden canPlayType, um das srcin JavaScript und breakoder returnnach dem ersten unterstützten Videotyp festzulegen, und vergessen Sie nicht, die Flash-Variable mp4 dynamisch zu aktualisieren. Einige Browser registrieren auch nicht, dass Sie die Quelle geändert haben, es sei denn, Sie rufen an video.load(). Ich glaube, das Problem mit .load()Ihnen kann durch einen ersten Anruf behoben werdenvideo.pause(). Das Entfernen und Hinzufügen von Videoelementen kann den Browser verlangsamen, da das entfernte Video weiterhin gepuffert wird . Es gibt jedoch eine Problemumgehung .

Browserübergreifende Unterstützung

Was den eigentlichen browserübergreifenden Teil betrifft, bin ich auch zu Video For Everybody gekommen . Ich habe bereits das MediaelementJS Wordpress-Plugin ausprobiert, das viel mehr Probleme verursachte als es löste. Ich vermute, die Probleme waren auf das Wordpress-Plug-In und nicht auf die eigentliche Bibliothek zurückzuführen. Ich versuche, etwas zu finden, das wenn möglich ohne JavaScript funktioniert. Bisher habe ich mir dieses einfache HTML ausgedacht:

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

Wichtige Hinweise :

• Am Ende wurde das Ei als erstes gesetzt, <source>da Mac OS Firefox den Versuch, das Video abzuspielen, beendet, wenn es als erstes auf einen MP4 stößt <source>.
• Die richtigen MIME - Typen sind wichtige .ogv Dateien sein sollten video/ogg, nicht video/ogv
• Wenn Sie HD-Video haben, ist Firefogg der beste Transcoder, den ich für OGG-Dateien in HD-Qualität gefunden habe
• Die .iphone.mp4Datei ist für das iPhone 4+ vorgesehen, das nur MPEG-4-Videos mit H.264 Baseline 3-Video und AAC-Audio wiedergibt. Der beste Transcoder, den ich für dieses Format gefunden habe, ist Handbrake. Die Verwendung der Voreinstellung für iPhone und iPod Touch funktioniert auf dem iPhone 4+. Damit das iPhone 3GS funktioniert, müssen Sie die Voreinstellung für den iPod verwenden, die eine viel niedrigere Auflösung aufweist, als die ich hinzugefügt habe video.iphone3g.mp4.
• In Zukunft können wir ein mediaAttribut für die <source>Elemente verwenden, um auf mobile Geräte mit Medienabfragen abzuzielen. Derzeit unterstützen die älteren Apple- und Android-Geräte dies jedoch nicht gut genug.

Bearbeiten :

• Ich verwende immer noch Video für alle, aber jetzt habe ich FlowPlayer verwendet, um den Flash-Fallback zu steuern, der über eine fantastische JavaScript-API verfügt , mit der er gesteuert werden kann.

Ich habe eine ähnliche Web-App und stehe überhaupt nicht vor solchen Problemen. Was ich mache ist so etwas:

var sources = new Array();

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

Wenn ich dann die Quellen ändern möchte, habe ich eine Funktion, die ungefähr so ​​funktioniert:

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

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

}

Ich mache das, damit der Benutzer eine Wiedergabeliste durchgehen kann, aber Sie können nach userAgent suchen und dann die entsprechende Datei auf diese Weise laden. Ich habe versucht, mehrere Quell-Tags zu verwenden, wie es alle im Internet vorgeschlagen haben, aber ich fand es viel sauberer und zuverlässiger, das src-Attribut eines einzelnen Quell-Tags zu manipulieren. Der obige Code wurde aus dem Speicher geschrieben, daher habe ich möglicherweise einige der Details beschönigt, aber die allgemeine Idee besteht darin, das src-Attribut des Quell-Tags gegebenenfalls mithilfe von Javascript dynamisch zu ändern.

Versuchen Sie, die OGG-Quelle nach oben zu verschieben. Ich habe bemerkt, dass Firefox manchmal verwirrt ist und den Spieler stoppt, wenn derjenige, den er spielen möchte, OGG, nicht der Erste ist.

Einen Versuch wert.

Ein anderer Weg, den Sie in Jquery tun können.

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

Verwenden von JavaScript und jQuery:

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