自定义HTML5视频控件 - 退出按钮不会触发全屏切换功能 [英] Custom HTML5 Video Controls - Escape Button will not fire fullscreen toggle function
问题描述
我有一个带自定义控件的视频播放器
I have a video player with custom controls
<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全屏按钮的自定义控件：
and here are the custom controls for JUST the fullscreen Button:
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 按钮时，该功能会切换为禁用全屏模式，但 NOT 会删除'全屏'类。
Now here's my problem: When the user CLICKS the fullscreen button to toggle it on or off, the display of the button works just fine (I have some styles attached to the class "fullscreen"). But when a user clicks the ESCAPE button on their keyboard, the function toggles to disable fullscreen mode, but does NOT remove the 'fullscreen' class.
我需要添加什么才能让切换仍然执行
What do I need to add to my function to allow the toggle to still execute
推荐答案
这是因为你应该正在监听 fullscreenchange 事件，而不是点击，因为 escape 不是点击事件。请尝试以下方法：
It's because you should be listening for the fullscreenchange event, not for a click, as escape is not a click event. Try the following:
document.addEventListener("fullscreenchange", function(event){
if(!document.fullscreenElement){
// remove your class here, clean up after full screen
}
}, false);
此事件暂时为前缀，因此您可能需要检查前缀，我通常使用下面的代码来简化它：
This event is prefixed for the moment, so you might need to check for prefixes, I usually use the following code to simplify it:
// 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"
};
现在你有一个对象包含三个东西：请求函数名称，文档全屏元素前缀名称和函数的退出名称。现在您可以执行以下操作：
Now you have an object that contains three things: the request function name, the document fullscreen element prefixed name and the exit name for the function. Now you can do the following:
if(fullscreen){
document.addEventListener(fullscreen["event"], function(event){
if(document[fullscreen["element"]]){
document.body.style.backgroundColor = "green";
} else {
document.body.style.backgroundColor = "red";
}
}, false);
}
这样你还可以减少全屏功能中的代码：
This way you could also reduce the code in your fullscreen function:
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/网站/活动/全屏转换
以及之前（相关）的问题：如何检测网页何时退出全屏？
You can find more here: https://developer.mozilla.org/en-US/docs/Web/Events/fullscreenchange And a previously (related) question here: How to detect when a page exits fullscreen?
以下代码段在Stack Overflow中不起作用 ，我不确定为什么。我测试了它，但它在我的Safari 8中有效。
The following snippet does not work in Stack Overflow, I'm unsure why. I have tested it and it works in my Safari 8, however.
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>
最后一位（你问过）在评论中）我们需要稍微清理一下你的触发器。我会尝试在一个函数中统一播放器的全屏，如下所示：
The last bit (you asked in the comments) is that we would need to clean up your trigger a bit. I would try to unify the fullscreening of your player in one function, like the following:
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）强制它为你做非全屏事件（后两个在你点击按钮时很方便使用）。
Now you can trigger fullscreenEnableDisable() when the fullscreenchange event is fired, and you can trigger fullscreenEnableDisable(true) to force it to apply your fullscreen stuff, and fullscreenEnableDisable(false) to force it to do you non-fullscreen stuff (these latter two are handy to use inside your button click).
这篇关于自定义HTML5视频控件 - 退出按钮不会触发全屏切换功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
