[Javascript] Ändern der Quelle auf HTML5-Video-Tag


Answers

Modernizr wirkte wie ein Zauber für mich.

Was ich getan habe ist, dass ich <source> nicht benutzt habe. Irgendwie hat das alles vermasselt, da das Video nur beim ersten Aufruf von load () funktioniert hat. Stattdessen habe ich das Source-Attribut innerhalb des Video-Tags -> <video src="blabla.webm" /> und <video src="blabla.webm" /> 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 immer CanPlayType() .

Question

Ich versuche einen Videoplayer zu bauen, der überall funktioniert. so weit 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 Seiten gesehen, zum Beispiel Video für alle ) so weit, so gut.

aber jetzt möchte ich auch eine art von playlist / menü zusammen mit dem video player, von dem ich andere videos auswählen kann. Diese sollten sofort in meinem Player geöffnet werden. dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ muss ich "die Quelle des Videos dynamisch ändern" (wie auf dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ sehen ist.) " dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ wir uns einen anderen Film an ") mit Javascript. vergessen wir mal den flashplayer (und damit IE) teil, ich werde mich später damit befassen.

Also sollte mein JS zum Ändern der <source> -Tags etwa 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>

Problem ist, das funktioniert nicht in allen Browsern. nämlich, firefox = O gibt es eine nette Seite, wo Sie das Problem beobachten können, das ich habe: http://www.w3.org/2010/05/video/mediaevents.html

sobald ich die load () methode auslöst (in firefox, wohlgemerkt), stirbt der video player.

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

Mein Plan ist also, einfach das src-Attribut zu verwenden und die entsprechende Datei mit der Funktion canPlayType() bestimmen.

mache ich es irgendwie falsch oder kompliziere die Dinge ??




Ich habe das mit dieser einfachen Methode gelöst

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



Laut Spezifikation

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

Also, was du versuchst zu tun, soll anscheinend nicht funktionieren.




Versuchen Sie, die OGG-Quelle nach oben zu verschieben. Ich habe bemerkt, dass Firefox manchmal verwirrt wird und den Spieler stoppt, wenn der, den es spielen will, nicht zuerst ist.

Einen Versuch wert.




Ich habe das schon eine ganze Weile erforscht, und ich versuche das Gleiche zu tun, also hoffentlich hilft das jemand anderem. Ich benutze crossbrowsertesting.com und teste es buchstäblich in fast jedem Browser, den man kennt. Die Lösung, die ich habe, funktioniert derzeit in Opera, Chrome, Firefox 3.5, IE8, iPhone 3GS, iPhone 4, iPhone 4, iPhone 5, iPhone 5, 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 möchten, müssen Sie das Video von der DOM / Seite entfernen und es erneut hinzufügen, damit Flash aktualisiert wird, da Flash dynamische Updates für Flash-Vars nicht erkennt. Wenn Sie JavaScript verwenden, um es dynamisch zu ändern, würde ich alle <source> -Elemente vollständig entfernen und einfach canPlayType , um den src in JavaScript zu setzen und nach dem ersten unterstützten canPlayType zu break oder return und dynamisch zu aktualisieren der Blitz var mp4. Außerdem registrieren einige Browser nicht, dass Sie die Quelle geändert haben, es sei denn, Sie rufen video.load() . Ich glaube, das Problem mit .load() Sie konnten behoben werden, indem Sie zuerst video.pause() aufrufen. 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

Soweit der eigentliche Cross-Browser-Teil, kam ich bei Video For Everyone an. Ich habe bereits das Wordpress-Plugin von MediaelementJS ausprobiert, das viel mehr Probleme verursacht als gelöst hat. Ich vermute, dass die Probleme auf das Wordpress-Plug-in und nicht auf die eigentliche Bibliothek zurückzuführen sind. Ich versuche, etwas zu finden, das möglichst ohne JavaScript funktioniert. Was ich bisher herausgefunden habe, ist dieser einfache HTML-Code:

<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 ogg als erste <source> hinzugefügt, weil Mac OS Firefox den Versuch beendet, das Video abzuspielen, wenn es ein MP4 als erste <source> .
  • Die richtigen MIME-Typen sind wichtig .ogv- Dateien sollten video/ogg , nicht video/ogv
  • Wenn Sie HD-Video haben, ist der beste Transcoder, den ich für OGG-Dateien in HD-Qualität gefunden habe, Firefogg
  • Die .iphone.mp4 Datei ist für iPhone 4+, die nur Videos wiedergeben, die MPEG-4 mit H.264 Baseline 3 Video und AAC-Audio sind. Der beste Transcoder, den ich für dieses Format gefunden habe, ist Handbrake. Die Verwendung der iPhone & iPod Touch- Voreinstellung funktioniert auf iPhone 4+, aber um das iPhone 3GS zum Laufen zu bringen, müssen Sie die iPod Voreinstellung verwenden, die eine viel niedrigere Auflösung hat video.iphone3g.mp4 .
  • In Zukunft können wir ein media Attribut für die <source> -Elemente verwenden, um mobile Geräte mit Medienabfragen anzusprechen, aber die älteren Apple- und Android-Geräte unterstützen es derzeit nicht gut genug.

Bearbeiten :

  • Ich benutze immer noch "Video For Everybody", aber jetzt habe ich den FlowPlayer verwendet, um das Flash-Fallback zu steuern, das über eine tolle JavaScript-API verfügt , mit der es gesteuert werden kann.



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>



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

Zufällig spielen sowohl FireFox als auch Chrome das "ogg" -Format, obwohl Chrome "webm" empfiehlt. Ich habe die Überprüfung der Browser-Unterstützung von "ogg" zuerst nur vorgenommen, weil andere Posts erwähnt haben, dass FireFox die ogg-Quelle zuerst bevorzugt (dh <source src="..." type="video/ogg"/> ). Aber ich habe nicht (und höchst zweifelhaft) getestet, ob die Reihenfolge im Code überhaupt einen Unterschied macht, wenn "src" auf dem Video-Tag gesetzt wird.

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