这是我的简单页面(未添加 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
最佳答案
您不需要附加新的源。只需设置新的 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
,因为这是更改源的常用方法。
关于javascript - 如何仅使用 JavaScript 更改视频源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39708711/