我可以使用 javascript 动态更改视频的来源吗？

Can I use javascript to dynamically change a video's source?

提问by March

How can I change a video's source using JS?

如何使用 JS 更改视频的来源？

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

采纳答案by Brian Campbell

Sure, you can just set the srcattribute on the sourceelement:

当然，您可以只src在source元素上设置属性：

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

Or using jQuery instead of standard DOM methods:

或者使用 jQuery 而不是标准的 DOM 方法：

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

回答by evilguc

I have faced this problem several times and based on previous experience and digging I can suggest these options:

我已经多次遇到这个问题，根据以前的经验和挖掘，我可以建议以下选项：

• replace video tag completely

• 完全替换视频标签

yes, just re-insert <video>element with new sources. It's straightforward, but effective approach. Don't forget to re-initialize event listeners.

是的，只需<video>使用新来源重新插入元素。这是简单但有效的方法。不要忘记重新初始化事件侦听器。

---

---

• assign video URL tovideo.src

• 将视频 URL 分配给video.src

this I saw a lot in answers here, on stackoverflow, and also in sources on github.

我在这里的答案、stackoverflow 以及 github 上的源代码中看到了很多。

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

It works, but you cannot provide browser options to choose from.

它有效，但您无法提供可供选择的浏览器选项。

---

---

• call.load()on video element

• 调用.load()视频元素

according to documentationyou can update srcattributes for <video>'s <source>tags and then call .load()to changes take effect:

根据文档，您可以更新's标签的src属性，然后调用更改生效：<video><source>.load()

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

Nevertheless hereit's said that there're problems in some browsers.

不过这里据说某些浏览器存在问题。

I hope it will be useful to have this all in one place.

我希望将这一切集中在一个地方会有用。

回答by emik

I have run into the same problem. According to this thread:

我遇到了同样的问题。根据这个线程：

changing source on html5 video tag

更改 html5 视频标签上的源

it is not possible to change the src of the source tag. you will have to use src of the video tag itself.

无法更改源标签的 src。您将不得不使用视频标签本身的 src。

回答by mkralla11

Although Campbell has provided the correct solution, a more complete solution to the 'playlist specific' question at hand (as noted in the comments) is provided here. This solution can be applied to all video formats if implemented correctly (I have used modernizrin order to detect which source will play for a given browser, combined with the solution above).

尽管 Campbell 提供了正确的解决方案，但此处提供了针对手头“特定播放列表”问题的更完整解决方案（如评论中所述）。如果正确实施，此解决方案可以应用于所有视频格式（我使用了Modernizr来检测给定浏览器将播放哪个源，并结合上述解决方案）。

This solution will work (and has been tested) for changing videos in HTML5 video tags in ALL HTML5 browsers, including IE8.

该解决方案将适用于（并且已经过测试）在所有 HTML5 浏览器（包括 IE8）中更改 HTML5 视频标签中的视频。

回答by mkralla11

Check this out. This javascript changes the src of the source tag. https://jsfiddle.net/a94zcrtq/8/

看一下这个。此 javascript 更改源标记的 src。 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>

回答by jimver04

This is working

这是工作

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

and in the javascript

并在javascript中

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

The key is the .load() function that reloads the video player.

关键是重新加载视频播放器的 .load() 函数。

回答by Manoj Rana

i hope it should work and please adjust attribute name and id as per your need

我希望它可以工作，请根据您的需要调整属性名称和 ID

html code below

html代码如下

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

js code below

下面是js代码

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

回答by Ronnie Royston

I found that dynamically creating and appending the child sourceelements did the trick.

我发现动态创建和附加子source元素可以解决问题。

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