javascript - 如何仅使用 JavaScript 更改视频源

Question

这是我的简单页面(未添加 CSS):

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

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

Answer 1

您不需要附加新的源。只需设置新的 src 属性并调用 video.load 函数即可。

查看工作 JSFiddle

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

编辑:将 .setAttribute('src',srcVideo) 更改为 .src = srcVideo，因为这是更改源的常用方法。