如何使用JavaScript更改HTML视频源？

Question

我已经尝试了几件事情，并没有成功。计算器可以帮不了我。我有下面的视频：

<video class="video-js vjs-default-skin" width="1024" height="720" controls data-setup='{}' id="vidarea">
<source src="E:/Vids/test.mp4" type="video/mp4" id="vidsource"></video>

我wan't改变视频显示，当我点击使用JS我的页面上的其他视频图标。我不能做到这一点。我试过了

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

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