Ändern der Quelle auf HTML5-Video-Tag

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

Was ich getan habe ist, dass ich nicht <source> Benutzt habe. Irgendwie hat das alles durcheinander gebracht, da das Video nur beim ersten Aufruf von load () funktioniert hat. Stattdessen habe ich das Quellattribut im Video-Tag -> <video src="blabla.webm" /> Verwendet und Modernizr verwendet, um zu bestimmen, 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 CanPlayType () immer verwenden.

Dein ursprünglicher Plan klingt gut für mich. Sie werden wahrscheinlich mehr Browser-Macken finden, die sich mit der dynamischen Verwaltung des <source> Elemente, 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 ist, hat keine Auswirkung. Um die Wiedergabe zu ändern, verwenden Sie einfach das src-Attribut direkt für das Medienelement und verwenden möglicherweise die canPlayType () -Methode, um aus den verfügbaren Ressourcen auszuwählen. Im Allgemeinen ist die manuelle Bearbeitung von Quellelementen nach dem Parsen 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 den gleichen Video-Player zum Laden neuer Dateien zu verwenden, löschen Sie einfach den gesamten <video> Element und erstellen Sie es neu. Die meisten Browser laden es automatisch, wenn die Quellcodes korrekt sind.

Beispiel (mit Prototype ):

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

Nach die Spezifikation

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

Also, was Sie versuchen zu tun, soll anscheinend nicht funktionieren.

Einfach ein Div setzen und den Inhalt aktualisieren ...

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

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 es sich um eine schlechte Codierungspraxis handelt.

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

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

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>

Ich komme damit um die Videoquelle dynamisch zu wechseln. Das Ereignis "canplay" wird in Firefox manchmal nicht ausgelöst, daher habe ich "loadedmetadata" 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();
};

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 etwas in der Art macht:

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 sich durch eine Wiedergabeliste bewegen 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 jeder im Internet vorgeschlagen hat, 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 Details überarbeitet, aber die allgemeine Idee ist, das src-Attribut des Quell-Tags gegebenenfalls mithilfe von Javascript dynamisch zu ändern.

Die Verwendung der <source /> - Tags erwies sich in Chrome= 14.0.835.202 als schwierig, obwohl es in FireFox gut funktionierte. (Dies könnte mein Mangel an Wissen sein, dachte ich aber Eine alternative Lösung könnte trotzdem nützlich sein.) Also habe ich einfach ein <video /> - Tag verwendet und das src-Attribut direkt auf das Video-Tag selbst gesetzt. Die canPlayVideo('<mime type>') -Funktion wurde verwendet, um festzustellen, ob Andernfalls kann der jeweilige Browser das Eingabevideo wiedergeben. Die folgenden Funktionen funktionieren in FireFox und Chrome.

Übrigens spielen sowohl FireFox als auch Chrome das "ogg" -Format, obwohl Chrome empfiehlt "webm". Ich überprüfe, ob der Browser "ogg" unterstützt. erstens nur, weil in anderen Beiträgen erwähnt wurde, dass FireFox zuerst die ogg-Quelle bevorzugt (dh <source src="..." type="video/ogg"/>), aber ich habe nicht geprüft (und bezweifle stark), ob die Reihenfolge im Code überhaupt einen Unterschied macht oder nicht beim Einstellen der "src" auf dem Video-Tag.

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 für eine ganze Weile recherchiert und ich versuche, das gleiche zu tun, also hoffentlich wird dies jemand anderem helfen. 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+) , Windows Phone 8.

Dynamisch wechselnde Quellen

Das dynamische Ändern des Videos ist sehr schwierig. Wenn Sie ein 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 dynamische Updates für Flash-Versionen nicht erkennt. Wenn Sie JavaScript verwenden, um es dynamisch zu ändern, würde ich alle <source> - Elemente vollständig entfernen und nur canPlayType verwenden, um das src festzulegen. in JavaScript und break oder return nach dem ersten unterstützten Videotyp und vergessen Sie nicht, den Flash Var MP4 dynamisch zu aktualisieren. Außerdem registrieren einige Browser nicht, dass Sie die Quelle geändert haben, es sei denn, Sie rufen video.load() auf. Ich glaube, das Problem mit .load(), das Sie hatten, kann 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, aber es gibt eine Problemumgehung .

Browserübergreifende Unterstützung

Was den eigentlichen browserübergreifenden Teil betrifft, bin ich auch zu Video For Everybody gelangt. Ich habe bereits das MediaelementJS Wordpress Plugin ausprobiert, das viel mehr Probleme verursachte als es löste. Ich vermute, dass die Probleme auf das Wordpress Plugin zurückzuführen waren. Ich versuche, etwas zu finden, das nach Möglichkeit ohne JavaScript funktioniert. Bisher habe ich mir folgendes einfaches 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 :

• Es endete damit, das OGG als erstes <source> Zu setzen, da Mac OS Firefox den Versuch, das Video abzuspielen, beendet, wenn es auf ein MP4 als erstes <source> Stößt.
• Die richtigen MIME-Typen sind wichtig . Ogv Dateien sollten video/ogg Sein, nicht video/ogv
• Wenn Sie HD-Videos 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 das iPhone 4+ bestimmt, das nur Videos wiedergibt, die MPEG-4) sind mit H.264 Baseline 3 Video und AAC Audio. Der beste Transcoder, den ich für dieses Format gefunden habe, ist Handbrake. Die Voreinstellung iPhone & iPod Touch funktioniert auf dem iPhone 4+, aber für das iPhone 3GS Um zu arbeiten, müssen Sie die Voreinstellung iPod verwenden, die eine viel niedrigere Auflösung hat, die ich als video.iphone3g.mp4 hinzugefügt habe.
• In Zukunft können wir ein media - Attribut für die <source> - Elemente verwenden, um mobile Geräte mit Medienabfragen anzusprechen. Derzeit sind jedoch die älteren Apple und Android Geräte unterstützen es nicht gut genug.

Bearbeiten :

• Ich verwende immer noch Video For Everybody, aber jetzt bin ich auf FlowPlayer umgestiegen, um den Flash-Fallback zu steuern. Dieser hat eine großartige JavaScript-API , die zur Steuerung verwendet werden kann.

Versuchen Sie, die OGG-Quelle nach oben zu verschieben. Ich habe bemerkt, dass Firefox manchmal verwirrt wird und den Player anhält, wenn derjenige, den er spielen möchte, OGG, nicht der erste ist.

Einen Versuch wert.

Eine andere Möglichkeit, die 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();
    });

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