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

Question

如何使用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>

Answer 1

当然,你可以src在source元素上设置属性:

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

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

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

Answer 2

我已经多次面对这个问题,根据以前的经验和挖掘我可以建议这些选项:

• 完全替换视频标签

是的,只需<video>用新来源重新插入元素.这是直截了当但有效的方法.不要忘记重新初始化事件侦听器.

• 将视频URL分配给 video.src

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

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

它可以工作,但您无法提供可供选择的浏览器选项.

• 呼吁 .load() 视频元素

根据文件,您可以更新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>

不过在这里据说有些浏览器存在问题.

我希望将这一切集中在一个地方是有用的.

Answer 3

我遇到了同样的问题.根据这个帖子:

更改html5视频标记上的源代码

无法更改源标记的src.你将不得不使用视频标签本身的src.