Question

嗨我有一个包含多个小视频的页面，可以通过点击覆盖图像来播放。如果已经有一个人玩，怎么能阻止他们玩onclick？我的脚本如下

function PlayVideo(aid, vid) 
{

    var myVideo = document.getElementsByTagName("video");

    if (myVideo.paused) {


        document.getElementById(vid).style.display = "block";
        document.getElementById(vid).play();
        document.getElementById(aid).style.display = "none";
        document.getElementById(vid).addEventListener('ended', myHandler, false);

        function myHandler(e) {
            if (!e) {
                e = window.event;
            }

            document.getElementById(vid).style.display = "none";
            document.getElementById(vid).load();
            document.getElementById(aid).style.display = "block";
        }
    } else {
        alert("this is an alert");
        return false;
    }

}

在没有if / else语句的情况下正常工作，但是任何点击都会启动电影，然后一次播放多部电影如何定义参数，以便在播放任何视频时，新的视频将无法启动。

Answer 1

myVideo是NodeList，您必须检查每个视频的值。

var allVideos = document.getElementsByTagName("video");
var areAllPaused = true;

for(var i=0; i < allVideos.length; i++) {
   if (!allVideos[i].paused) {
      areAllPaused = false;
   }
}

Answer 2

你可以用一个标志来检查，即

var videoIsPlaying = false;

function playVideo () {

    if(videoIsPlaying){
        //dont play video
    }else{
        //play video and set to true
        videoIsPlaying = true;
    }

}

你必须将它设置为暂停等

Answer 3

document.getElementsByTagName()将返回一个包含所有视频元素的数组。要检查它们是否正在播放，您需要遍历阵列并检查是否正在播放任何视频：

var anyPlaying=false;
for(var i=0;i<myVideo.length;i++){
    if(!myVideo[i].paused){
        anyPlaying=true;
    }
}

if(!anyPlaying){
    //...
}else{
    return false;
}

如果没有其他视频播放则播放视频

3 个答案: