H5全屏API与视频全屏

原生 FullScreen API

Element.requestFullscreen()

用于将特定元素打开全屏。使用方式是先获取HTML Element元素，然后调用其 requestFullscreen方法：

const buttomElem = document.getElementById('myButton');
buttomElem.addEventListener('click', function() {const videoElem = document.getElementById("myVideo");// 打开全屏videoElem.requestFullscreen(); 
}, false); 

注意：打开全屏只能通过用户操作触发，比如click事件。如果在一开始加载页面的时候调用 requestFullscreen方法并不能打开全屏，且会在控制台中看到报错。

document.exitFullscreen()

用于退出全屏模式，与 requestFullscreen 不同，该方法挂载在document中：

const closeElem = document.getElementById('close');
closeElem.addEventListener('click', function() {// 退出全屏document.exitFullscreen(); 
}, false); 

document.fullscreenElement

该属性表示当前全屏模式下的Element元素。如果这个值为null，则表示不处于全屏模式。使用这个属性可以判断当前页面是否处于全屏模式：

// 切换全屏和非全屏模式的按钮
const toggleElem = document.getElementById('toggle');
toggleElem.addEventListener('click', function() {// 判断是否是全屏模式if (document.fullscreenElement) {// 退出全屏document.exitFullscreen(); } else {const videoElem = document.getElementById("myVideo");// 打开全屏 videoElem.requestFullscreen(); }
}, false); 

document.fullscreenEnabled

该属性表示当前浏览器是否是否支持全屏模式。

const buttomElem = document.getElementById('myButton');
buttomE