怎么用js实现点击"视频1"按钮播放时,视频1出现并且播放,而点击"视频2"按钮时,视频2出现并且播放同时视频1停止并且隐藏。以下是我目前尝试的的代码,已经卡住了。感谢指导!
<body>
<button onclick="playOrNot(1);" type="button">视频1</button>
<button onclick="playOrNot(2)" type="button">视频2</button>
<br>
<video id="1" controls="controls" hidden>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<video id="2" controls="controls" hidden>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<script>
var lastId = id;
function playOrNot(id){
var video = document.getElementById(id);
if(video.paused){
video.play();
}
else{
video.pause();
}
video.removeAttribute("hidden");
return id;
}
function noLast(lastId){
playOrNot(lastId);
var audio2 = document.getElementById(lastId);
audio2.setAttribute("hidden",true);
}
</script>
</body>