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>元素即可。这是直截了当但有效的方法。不要忘记重新初始化事件监听器。

将视频网址分配给 video.src

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

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

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

致电 .load()

根据documentation，您可以更新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>

然而here据说某些浏览器存在问题。

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

Answer 3

我遇到了同样的问题。根据这个帖子：

changing source on html5 video tag

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

Answer 4

尽管坎贝尔提供了正确的解决方案，但仍然提供了一个更完整的解决方案（正如评论中所述）“{3}}。如果正确实施，此解决方案可应用于所有视频格式（我已使用here来检测将为给定浏览器播放哪个源，并结合上述解决方案。）

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

Answer 5

检查一下。这个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 6

这是有效的

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

我希望它能够正常工作，请根据需要调整属性名称和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 8

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

由于其他解决方案对我不起作用，因此我做了以下事情：

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

什么都不需要使该解决方案运行-除非我以某种方式弄乱了...

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

9 个答案: