记录一下HTML5 中Video 全屏监听，退出全屏事件方法

HTML5 中的 Video 元素提供了全屏模式，可以通过 JavaScript 监听全屏事件和退出全屏事件。

以下是监听全屏事件和退出全屏事件的方法：

1. 监听全屏事件：

videoElement.addEventListener('fullscreenchange', fullscreenHandler);
videoElement.addEventListener('webkitfullscreenchange', fullscreenHandler);
videoElement.addEventListener('mozfullscreenchange', fullscreenHandler);
videoElement.addEventListener('MSFullscreenChange', fullscreenHandler);

function fullscreenHandler() {
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
        // 进入全屏
    } else {
        // 退出全屏
    }
}

2. 监听退出全屏事件：

document.addEventListener('fullscreenchange', exitFullscreenHandler);
document.addEventListener('webkitfullscreenchange', exitFullscreenHandler);
document.addEventListener('mozfullscreenchange', exitFullscreenHandler);
document.addEventListener('MSFullscreenChange', exitFullscreenHandler);

function exitFullscreenHandler() {
    if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
        // 退出全屏
    }
}

以上代码可以同时监听各个浏览器的全屏事件和退出全屏事件。当 Video 进入全屏或退出全屏时，会触发相应的事件处理函数。