Wie man HTML5 Videoquelle dynamisch ändert?

Question

Ich benutze Flowplayer um Live Videos zu rendern. Auf Knopfdruck möchte ich die src (video url) zu einer anderen URL dynamisch ändern. Dies muss auf den meisten mobilen Geräten (iOS und Android) gut funktionieren. Ich habe fast alle Antworten in diesem Thread versucht, aber nichts scheint auf allen Geräten gut zu funktionieren - changing source on html5 video tag.

Eine Antwort von antonioj1015 Werken außer, dass ich sehe nicht die Standard-Wiedergabe/Pause-Tasten auf dem Player.

Hier ist mein Flowplayer div-Container aussieht -

<div id="player" class="flowplayer"> 
    <video id="video"><source id="video_src" src="//mydomain.com/video.mp4" type="video/mp4"> 
    </video> 
</div> 

Javascript-Code sieht wie folgt aus -

document.getElementById('player').innerHTML = '<video id="video"><source src="'+newurl+'" type="video/mp4"></video>'; 
document.getElementById('video').load(); 
document.getElementById('video').play(); 

Ich habe versucht, das gesamte Video-Tag zu ersetzen. Auch versucht, die src dynamisch zu ändern, aber nichts scheint zu funktionieren. Jeder Schub in die richtige Richtung wird sehr geschätzt. Vielen Dank.

Answer 1

Sie können setAttribute() verwenden.

document.getElementById('video').setAttribute("src", "//mydomain.com/othervideo.mp4"); 
document.getElementById('video').load(); 
document.getElementById('video').play(); 

Lesen Sie mehr über https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute

Answer 2

Sie flowplayer api auf eine globale Variable

var myApi; 
flowplayer(function (api, root) { myApi = api; }); 

dann auf Ihre Schaltfläche klicken, tun am Anfang einstellen:

$("#yourbutton").on("click", function() { 
     myApi.load({ 
     sources: [{ type: "video/mp4", 
        src: newurl }] 
     }); 
    });