我有一个带自定义控件的视频播放器
<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>
以下是JUST全屏按钮的自定义控件：
var fullscreenbtn;
fullscreenbtn = document.getElementById("fullscreenbtn");
fullscreenbtn.addEventListener("click",toggleFullScreen,false);
function toggleFullScreen(){
if ( document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
fullscreenbtn.setAttribute("class", "");
} else{
if ( document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled){
if (player.requestFullscreen) {
player.requestFullscreen();
} else if (player.webkitRequestFullscreen) {
player.webkitRequestFullscreen();
} else if (player.mozRequestFullScreen) {
player.mozRequestFullScreen();
} else if (player.msRequestFullscreen) {
player.msRequestFullscreen();
}
fullscreenbtn.setAttribute("class", "fullscreen");
}
}
}
现在这是我的问题：当用户单击全屏按钮以打开或关闭它时，按钮的显示效果很好（我有一些样式附加到类“全屏”）。但是当用户点击键盘上的 ESCAPE 按钮时，该功能会切换为禁用全屏模式，但不会删除'全屏'类。
我需要添加什么才能让切换仍然执行
答案 0 :(得分：1)
这是因为您应该正在收听fullscreenchange事件，而不是点击，因为escape不是点击事件。请尝试以下方法：
document.addEventListener("fullscreenchange", function(event){
if(!document.fullscreenElement){
// remove your class here, clean up after full screen
}
}, 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"
};
现在你有一个object包含三件事：请求函数名，文档全屏元素前缀名和函数的出口名。现在您可以执行以下操作：
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");
}
}
}
您可以在此处找到更多信息：https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange 这里有一个先前（相关）的问题：How to detect when a page exits fullscreen?
以下代码段在Stack Overflow中不起作用，我不确定原因。我测试了它，然而它在我的Safari 8中工作。
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"
};
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");
}
}
}<video poster="image.jpg" autoplay>
<source src="video.mp4" id="vidM" type="video/mp4"></source>
</video>
<button id="fullscreenbtn" onclick="toggleFullScreen(this)">FS</button>
最后一点（你在评论中提到的）是我们需要稍微清理你的触发器。我会尝试在一个函数中统一播放器的全屏，如下所示：
function fullscreenEnableDisable(isFullScreen){
// Check here to see if you need to enable or disable fullscreen classes
// pass isFullScreen to force the change instead of check.
isFullScreen = isFullScreen || typeof document[fullscreen["element"]] != "undefined";
if(isFullScreen){
// Do whatever you want related to being fullscreen
} else {
// Do whatever you want related to _not_ being fullscreen
}
}
现在，您可以在fullscreenEnableDisable()事件被触发时触发fullscreenchange，并且您可以触发fullscreenEnableDisable(true)强制它应用您的全屏事件，fullscreenEnableDisable(false)强制它为你做非全屏的东西（后两个在按钮点击中使用很方便）。