Question

我尝试了几件事，但没有成功。 stackoverflow也帮不了我。我有以下视频：

const myVideo = document.getElementById('vidsource');
.
.
.
myVideo.src = 'E:/Vids/test2.mp4';

当我使用JS单击页面上的另一个视频图标时，我不会更改显示的视频。我只是做不到。我尝试过

<html>
<body>
    <a class="twitter-timeline" data-width="377" data-height="250" href="https://twitter.com/KhaosERP?ref_src=twsrc%5Etfw">Tweets by KhaosERP</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

Answer 1

您可以使用setAttribute（）来设置src属性 https://www.w3schools.com/jsref/met_element_setattribute.asp

Answer 2

不使用setAttribute进行更新，（这对我有用，请检查视频网址），这里不需要<source>标记：

<video id="vidarea" class="video-js vjs-default-skin" width="1024" height="720" controls autoplay ></video>

<script> 
   var vid = document.getElementById("vidarea");
   vid.src = "E:/Vids/test2.mp4";
</script>

使用setAttribute，这是您的代码：

document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4");

如果您需要在加载时添加它

window.onload = function() {
  document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4"); 
};

如果需要在单击时添加它

<video class="video-js vjs-default-skin" width="1024" height="720" controls 
 data-setup='{}' id="vidarea">
 <source type="video/mp4" id="vidsource"></video>    
 <button onclick="myFunction()">Add src</button>


function myFunction() {
    document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4"); 
}

如何使用javascript更改html视频源？

2 个答案: