我可以使用 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

当然，

1. 您可以在 source 元素上设置 src 属性：

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

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

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

2. 然后您需要调用视频元素上的 load 方法：

   videoElement.load()

Answer 2

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

• 完全替换视频标签

是的，只需重新插入 元素即可新来源。这是简单而有效的方法。不要忘记重新初始化事件侦听器。

---

• 将视频 URL 分配给 video.src

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

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

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

---

• 调用.load()视频元素

根据 。 asp" rel="noreferrer">文档 您可以更新 的 的 src 属性标签，然后调用 .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 。

Answer 4

这是有效的

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

，在 javascript 中

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

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

Answer 5

根据此规范说明。

当元素被修改时动态修改源元素及其属性
已插入视频或音频元素的将不会产生任何效果。到
更改正在播放的内容，只需使用媒体上的 src 属性
直接元素

所以假设你有：

<audio>
    <source src='./first-src'/>
</audio>

你可以像这样修改媒体src：

<audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

Answer 6

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

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

Answer 7

看看这个。此 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>

Answer 8

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

下面的 html 代码 下面的

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

js 代码

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

Answer 9

我发现动态创建和附加子 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);
    }           
}

Answer 10

由于其他解决方案对我不起作用，这就是我所做的：

 <video width="400" controls id="the_id_of_your_video_here">
  <source src="path_to_first_video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<button type="button" name="button" onclick="changeVid()">Click me to change the video</button>

<script>
function changeVid(){
  var video =  document.getElementById("the_id_of_your_video_here");
  video.src = 'path_to_second_video.mp4'; // Make sure to not use ..\ like in HTML but ../ if you have to give a more complex file path like: '../../myVideoFolder/myVideo.mp4'
  video.load();
}
</script>

不需要其他任何东西来让这个解决方案运行 - 除非我搞砸了......