如何仅使用JavaScript更改视频源

这是我的简单页面（未添加css）：

播放视频1
播放视频2
X
功能播放视频（srcVideo）{
var video=document.getElementById（'video'）；
var source=document.createElement（'source'）；
source.setAttribute（'src'，srcVideo）；
视频。追加子项（来源）；
video.play（）；
}
函数StopVideo（）{
document.getElementById（'video'）.pause（）；
}

---

当我点击“播放视频2”时，它仍在播放视频1。那么，如何切换视频源以在同一视频元素中播放？如果可能的话，我只需要纯JavaScript

您不需要附加新的源代码。只需设置新的

src

属性并调用

video.load

函数

见工作

编辑：

---

已将

.setAttribute（'src'，srcVideo）

更改为

.src=srcVideo

，因为这是更改源的常用方法。

您不需要追加新源。只需设置新的

src

属性并调用

video.load

函数

见工作

编辑：

---

将

.setAttribute（'src'，srcVideo）

更改为

.src=srcVideo

，因为这是更改源的常用方法。

您正在向现有视频元素添加更多源。您需要清除以前加载的源，或者最好每次创建一个新的视频元素。您正在向现有视频元素添加更多源。您需要清除以前加载的源，或者更好的是，每次都创建一个新的视频元素。这是一个很好的示例，但它不适用于像@VladP这样的文件/url。那一定是你的主人出了什么问题。我还在本地主机（使用WAMP、XAMPP和Node.js构建）上测试了它，它工作正常。我就是不能改变来源。所以它不是主机problem@VladP. 你能成功地改变我小提琴的来源吗？如果是的话，那么复制粘贴它，它就会工作。很抱歉给你添麻烦。。它确实有用。。非常感谢你。。我将其标记为answeredgood示例，但它不适用于像@VladP这样的文件/url。那一定是你的主人出了什么问题。我还在本地主机（使用WAMP、XAMPP和Node.js构建）上测试了它，它工作正常。我就是不能改变来源。所以它不是主机problem@VladP. 你能成功地改变我小提琴的来源吗？如果是的话，那么复制粘贴它，它就会工作。很抱歉给你添麻烦。。它确实有用。。非常感谢你。。我把它标为已回答

<a onclick="PlayVideo('http://www.myhost.com/..../myVideo1.mp4');">Play Video 1</a>
<a onclick="PlayVideo('http://www.myhost.com/..../myVideo2.mp4');">Play Video 2</a>

<div id="xxxxxx">
    <div><a onclick="StopVideo();">X</a>
         <video id="video" width="520" height="360" controls></video>
    </div>
</div>


<script>
    function PlayVideo(srcVideo) {
        var video = document.getElementById('video');
        var source = document.createElement('source');   
        source.setAttribute('src', srcVideo);
        video.appendChild(source);
        video.play();
    }

    function StopVideo() {
        document.getElementById('video').pause();
    }
</script>

video = document.getElementById('video');
source = document.getElementById('source');

function PlayVideo(srcVideo){
  video.pause();
  source.src = srcVideo;
  video.load();
  video.play();
}

function StopVideo(){
  document.getElementById('video').pause();
}