Javascript 自定义HTML5视频控件-逃生按钮不会触发全屏切换功能

我有一个带有自定义控件的视频播放器

<div>
<video poster="image.jpg" autoplay>
     <source src="video.mp4" id="vidM" type="video/mp4"></source>
</video>

<div id="media-controls">
<button type="button" id="play-pause" class="paused" >PLAY</button>
<button type="button" id="rewind10" >REWIND 10 SECONDS</button>
<button type="button" id="loop" >LOOP</button>
<input id="seekslider" type="range" min="0" max="100" value="0">
<span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span>
<button id="fullscreenbtn" >FS</button>
<button id="popoutbtn" >POPOUT</button>
<div id="fullVolume">
<button id="mutebtn" >MUTE</button>
<div id="volumeContainer"><input id="volumeslider" type="range" min="0" max="100" value="100" step="1" class="vertical" orient="vertical"></div>
</div>
</div>
</div>

现在我的问题是：当用户单击全屏按钮来打开或关闭它时，按钮的显示效果很好（我在类“全屏”中附加了一些样式）。但是，当用户单击键盘上的“退出”按钮时，该功能将切换为禁用全屏模式，但不会删除“全屏”类

---

我需要在我的函数中添加什么才能允许切换仍然执行？这是因为你应该监听

fullscreenchange

事件，而不是点击，因为

escape

不是点击事件。请尝试以下操作：

document.addEventListener("fullscreenchange", function(event){
    if(!document.fullscreenElement){
        // remove your class here, clean up after full screen
    } 
}, false);

if(fullscreen){
    document.addEventListener(fullscreen["event"], function(event){
        if(document[fullscreen["element"]]){
            document.body.style.backgroundColor = "green";
        } else {
            document.body.style.backgroundColor = "red";
        }
    }, false);
}

此事件目前是前缀，因此您可能需要检查前缀，我通常使用以下代码来简化它：

// We will have fullscreen as a variable holding all the prefix values we need
// Ifd its false, there is no support!
var fullscreen = false;
if(document.fullscreenEnabled) 
    fullscreen = {
        request: "requestFullscreen",
        element: "fullscreenElement",
        exit: "exitFullscreen",
        event: "fullscreenchange"
    };
else if(document.msfullscreenEnabled) 
    fullscreen = {
        request: "msRequestFullscreen",
        element: "msFullscreenElement",
        exit: "msExitFullscreen",
        event: "msfullscreenchange"
    };
else if(document.mozfullscreenEnabled) 
    fullscreen = {
        request: "mozRequestFullScreen",
        element: "mozFullScreenElement",
        exit: "mozCancelFullScreen",
        event: "mozfullscreenchange"
    };
else if(document.webkitFullscreenEnabled) 
    fullscreen = {
        request: "webkitRequestFullscreen",
        element: "webkitFullscreenElement",
        exit: "webkitExitFullscreen",
        event: "webkitfullscreenchange"
    };

现在您有了一个

对象

，它包含三个内容：请求函数名、文档全屏元素前缀名和函数的退出名。现在，您可以执行以下操作：

document.addEventListener("fullscreenchange", function(event){
    if(!document.fullscreenElement){
        // remove your class here, clean up after full screen
    } 
}, false);

if(fullscreen){
    document.addEventListener(fullscreen["event"], function(event){
        if(document[fullscreen["element"]]){
            document.body.style.backgroundColor = "green";
        } else {
            document.body.style.backgroundColor = "red";
        }
    }, false);
}

这样，您还可以减少全屏功能中的代码：

function toggleFullScreen(player){
    // start by checking if fullscreen was set. If not, don't continue.
    if(!fullscreen){
        return;
    }
    // Then check if an element is set and if the exit function exists 
    else if (document[fullscreen["element"]] && document[fullscreen["exit"]]) {
        document.document[fullscreen["exit"]]();
        fullscreenbtn.setAttribute("class", "");
    } 
    // otherwise check if request exists and trigger that.
    else {
        if (player[fullscreen["request"]]) {
            player[fullscreen["request"]]();
            fullscreenbtn.setAttribute("class", "fullscreen"); 
        }  
    }
}

您可以在此处找到更多信息： 这里还有一个先前（相关）的问题：

以下代码段在堆栈溢出中不起作用，我不确定原因。不过，我已经测试过了，它在我的Safari 8中运行良好

var全屏=false；
如果（document.fullscreenEnabled）
全屏={
请求：“请求全屏”，
元素：“fullscreenElement”，
退出：“exitFullscreen”，
事件：“fullscreenchange”
};
else if（document.msfullscreenEnabled）
全屏={
请求：“msRequestFullscreen”，
元素：“msFullscreenElement”，
退出：“MSEXIT全屏”，
事件：“msfullscreenchange”
};
else if（document.mozfullscreenEnabled）
全屏={
请求：“mozRequestFullScreen”，
元素：“mozFullScreenElement”，
退出：“全屏”，
事件：“mozfullscreenchange”
};
else if（document.webkitfullseenabled）
全屏={
请求：“webkitRequestFullscreen”，
元素：“webkitFullscreenElement”，
退出：“webkitExitFullscreen”，
事件：“webkitfullscreenchange”
};
如果（全屏）{
document.addEventListener（全屏[“事件”]，函数（事件）{
if（文档[全屏[“元素”]”）{
document.body.style.backgroundColor=“绿色”；
}否则{
document.body.style.backgroundColor=“红色”；
}
}，假）；
}
功能切换全屏（播放器）{
//首先检查是否设置了全屏。如果没有，请不要继续。
如果（！全屏）{
返回；
}
//然后检查是否设置了元素以及是否存在退出功能
else if（文档[全屏[“元素”]]和文档[全屏[“退出”]]）{
document.document[全屏[“退出”]（）；
fullscreenbtn.setAttribute（“类”，“类”）；
} 
//否则，检查请求是否存在并触发该请求。
否则{
如果（播放器[全屏[“请求”]]）{
播放器[全屏[“请求”]（）；
全屏btn.setAttribute（“类”、“全屏”）；
}  
}
}

FS

这是因为您没有单击按钮，只是触发了一个事件（查看

fullscreenchange

事件，允许您执行相同的

文档。fullScreenElement

检查。在这里检查答案：我已经放置了此函数代码，但什么都没有发生。我的javascript是否位于从HTML调用的外部文件中有关系？我还更正了第一个！d文档中的键入错误，因此这不是问题。@murphy1976我扩展了一点，注意到我忘记了前缀，事件实际上不需要单词上的

。请看一看并尝试一下，让我知道。当我将您的代码片段应用于我的功能时，我得到了两个有趣的结果。在状态之间来回切换非常有效。我修改了我将document.background改为只影响全屏按钮的样式，谢谢。当我单击按钮时，全屏视图中只显示fulscreen按钮。当按钮位于中间时，它是黑色的。此外，我无法在全屏视图中单击按钮一次。我只能单击ESCAPE退出全屏@Murphy1976-这是因为您的视频元素已经全屏显示（正如您所做的那样）。您需要告诉触发器要全屏显示什么，所以请尝试
toggleFullScreen（document.body）
使您的全身全屏显示，或者将
toggleFullScreen（）
函数传递给任何其他HTML元素（如果您有一个名为
myVideoPlayer
的id，请传递类似于
document.getElementById（'myVideoPlayer'）的内容）
包括按钮等。此外，我还修改了我的帖子，提供了一些关于如何解决你的类的信息。我将代码的重点放在了玩家身上，但我仍然会遇到同样的错误：我无法单击按钮将其恢复，现在类移除也恢复了。