webentwicklung-frage-antwort-db.com.de

Kann ich Javascript verwenden, um die Quelle eines Videos dynamisch zu ändern?

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>
javascriptjqueryvideohtml5
31
March

Sicher, Sie können einfach das src-Attribut für das source-Element festlegen:

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

Oder verwenden Sie jQuery anstelle von Standard-DOM-Methoden:

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

Ich bin mehrmals mit diesem Problem konfrontiert und kann aufgrund meiner bisherigen Erfahrungen und Nachforschungen folgende Optionen vorschlagen:

  • Video-Tag vollständig ersetzen

ja, einfach <video> Element mit neuen Quellen einfügen. Es ist ein einfacher, aber effektiver Ansatz. Vergessen Sie nicht, die Ereignis-Listener erneut zu initialisieren.

  • Video-URLvideo.src zuweisen

das habe ich in Antworten hier, in stackoverflow und auch in Quellen auf github viel gesehen.

var video = document.getElementById('#myVideo');
video.src = newSourceURL;

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

  • call.load()on video element

gemäß documentation können Sie src-Attribute für <video>s <source>-Tags aktualisieren und dann .load() aufrufen, damit die Änderungen wirksam werden:

<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 hier heißt es, dass es in einigen Browsern Probleme gibt.

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

14
evilguc

Ich bin auf das gleiche Problem gestoßen. Laut diesem Thread: 

Ändern der Quelle für das HTML-5-Tag

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

5
emik

ich hoffe, dass es funktionieren sollte, und passen Sie bitte den Attributnamen und die ID an

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

Schau dir das an. Dieses Javascript ändert die src 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>

0
user6701418

Ich fand, dass das dynamische Erstellen und Anhängen der untergeordneten source -Elemente den Trick machte.

var videoElement = document.querySelector('.my-video');
var videoSources = ["video.mp4","video.webm"]
if (videoElement) {
    for (var i = 0; i < videoSources.length; i++) {
        var sourceTag = document.createElement("source");
        sourceTag.type = "video/" + videoSources[i].split('.')[1];
        sourceTag.src = videoSources[i];
        videoElement.appendChild(sourceTag);
    }           
}
0
Ron Royston

Obwohl Campbell die richtige Lösung bereitgestellt hat, wird eine umfassendere Lösung für die vorliegende Playlist-spezifische Frage (wie in den Kommentaren angegeben) angegeben hier . Diese Lösung kann bei korrekter Implementierung auf alle Videoformate angewendet werden (Ich habe modernizr verwendet, um zu ermitteln, welche Quelle für einen bestimmten Browser abgespielt wird, in Kombination 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.

0
mkralla11

Das funktioniert

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

und im Javascript

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

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

0
jimver04