HTML5 video进入全屏和退出全屏的实现方法

HTML5 video元素已经成为了网页中一个重要的标签，随着移动设备日益普及，人们对于网页上视频素材的需求也日益增多。在实际运用中，除了播放视频以外，还需要一些其他的交互功能，比如：全屏播放。而HTML5 video元素是支持全屏播放的，但是因为浏览器的兼容性问题，实现全屏播放还需要一些特殊的技巧。

进入全屏实现方法

当前W3C标准里面并没有将video元素的全屏播放作为标准属性定义，所以我们可以根据特定需求自己实现全屏播放的功能。以下是一种实现全屏播放的方式。

1. 首先，在video元素外部包裹一层div。

<div class="video-container">
    <video src="xxxx.mp4" poster="xxxx.jpg"></video>
</div>

2. 为div添加样式，让视频元素填充整个容器的大小。

.video-container{
    width: 100%;
    height: 100%;
}

3. 为video元素添加点击监听事件，当点击视频元素时进入全屏模式。

var video = document.querySelector('video');
video.addEventListener('click', function(){
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
    }
});

退出全屏实现方法

同样地，我们需要自己动手实现退出全屏模式的代码。

1. 首先，获取当前全屏元素。

var fullscreenElement =
    document.fullscreenElement || // standard method
    document.webkitFullscreenElement || // webkit
    document.mozFullscreenElement || // firefox
    document.msFullscreenElement; // IE11

2. 如果存在全屏元素，调用退出全屏方法。

if (fullscreenElement) {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

总结

HTML5 video元素已经成为了网页中的重要标签，我们可以通过特定的代码实现全屏播放和退出全屏两个功能。在具体实现过程中，需要注意不同浏览器的兼容性问题。