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

Question

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

<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 按钮时，该功能会切换为禁用全屏模式，但 NOT 会删除 'fullscreen' 类.

我需要在我的函数中添加什么以允许切换仍然执行

Answer 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?

下面的 sn-p 在 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>

最后一点（您在 cmets 中问过）是我们需要稍微清理一下您的触发器。我会尝试在一个功能中统一播放器的全屏显示，如下所示：

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
    }
}

现在您可以在触发fullscreenchange 事件时触发fullscreenEnableDisable()，您可以触发fullscreenEnableDisable(true) 强制它应用您的全屏内容，并触发fullscreenEnableDisable(false) 强制它执行非全屏内容（后两者很方便在您的按钮单击中使用）。