Question

Wie kann ich die Quelle eines Videos mit JS ändern?

<video id="myVideoTag" width="670" height="377" autoplay="true" controls="controls"> 
    <source src="http://www.test.com/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video> 

Answer 1

Sicher, können Sie einfach stellen Sie die src Attribut auf dem source Element:

document.querySelector("#myVideoTag > source").src = "http://example.com/new_url.mp4" 

Oder jQuery anstelle von Standard-DOM-Methoden verwenden:

$("#myVideoTag > source").attr("src", "http://example.com/new_url.mp4"​​​​)​ 

Answer 2

ich in die gleiche ausgeführt haben Problem. Nach diesem Thema:

changing source on html5 video tag

es nicht möglich ist, die src des Quell-Tages zu ändern. Sie müssen src des Video-Tags selbst verwenden.

Answer 3

Obwohl Campbell die richtige Lösung bereitgestellt hat, wird eine vollständigere Lösung für die "playlist-spezifische" Frage zur Verfügung gestellt (wie in den Kommentaren erwähnt) here. Diese Lösung kann auf alle Videoformate angewendet werden, wenn sie korrekt implementiert ist (Ich habe modernizr verwendet, um zu erkennen, welche Quelle für einen bestimmten Browser abgespielt wird, kombiniert mit der obigen Lösung).

Diese Lösung funktioniert (und wurde getestet) zum Ändern von Videos in HTML5-Video-Tags in ALLEN HTML5-Browsern, einschließlich IE8.

Answer 4

Ich habe dieses Problem mehrmals konfrontiert und basierend auf früheren Erfahrungen und Graben ich diese Optionen vorschlagen kann:

• ersetzen Video-Tag vollständig

ja gerade wieder einsetzen <video> Element mit neuen Quellen. Es ist ein einfacher, aber effektiver Ansatz. Vergessen Sie nicht, die Ereignis-Listener erneut zu initialisieren.

---

• assign Video-URL zuvideo.src

sah ich eine Menge in den Antworten hier auf Stackoverflow, und auch in den Quellen auf GitHub.

Es funktioniert, aber Sie können keine Browseroptionen zur Auswahl bereitstellen.

---

• Anruf.load()auf Videoelement

documentation nach Ihnen src Attribute für <video> ‚s <source> Tags aktualisieren und rufen dann .load() zu Änderungen wirksam:

<video id="myVideo"> 
    <source src="video.mp4" type="video/mp4" /> 
    <source src="video.ogg" type="video/ogg" /> 
</video> 

<script> 
    var video = document.getElementById('myVideo'); 
    var sources = video.getElementsByTagName('source'); 
    sources[0].src = anotherMp4URL; 
    sources[1].src = anotherOggURL; 
    video.load(); 
</script> 

Trotzdem here es heißt, dass es in einigen Browsern Probleme gibt.

Ich hoffe, es wird nützlich sein, das alles an einem Ort zu haben.

Answer 5

Überprüfen Sie dies. Dieses Javascript ändert den Quellcode des Quell-Tags. https://jsfiddle.net/a94zcrtq/8/

<script> 
 
    function toggle() { 
 
      if ($(this).attr('data-click-state') == 1) { 
 
       $(this).attr('data-click-state', 0) 
 
       document.getElementById("source").src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"; 
 
       document.getElementById("videoPlayer").load(); 
 
      } else { 
 
       $(this).attr('data-click-state', 1) 
 
       document.getElementById("source").src = "http://techslides.com/demos/sample-videos/small.mp4"; 
 
       document.getElementById("videoPlayer").load(); 
 
      } 
 
     } 
 
</script>

Answer 6

Dieser arbeitet

<video id="videoplayer1" width="240" height="160" controls> 
    <source id="video_res_1" src="" type="video/ogg"> 
</video> 

und in der JavaScript

document.getElementById("video_res_1").src = "my video url.ogv"; 
document.getElementById("videoplayer1").load(); 

Der Schlüssel ist die .load() Funktion, die den Video-Player neu lädt .

Answer 7

ich hoffe, es sollte funktionieren und bitte Attributnamen und id wie pro Ihre Notwendigkeit

HTML-Code unten

<video controls style="max-width: 90%;" id="filePreview">       
    <source type="video/mp4" id="video_source"> 
</video> 

js Code unten

$("#fileToUpload").change(function(e){ 
     var source = $('#video_source'); 
     source[0].src = URL.createObjectURL(this.files[0]); 
     source.parent()[0].load(); 
    });