原生 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