video 元素 JS 全屏

在JavaScript中，如果你想让HTML中的`<video>`元素全屏播放，可以使用`fullscreen`属性和相关的API。下面是一个简单的步骤：

1. 首先，确保你的`<video>`元素有一个触发全屏的事件监听器，比如点击事件(`click`)：

<button onclick="enterFullScreen(videoElement)">全屏</button>
<video id="videoElement" src="your_video_source.mp4"></video>

2. 然后，在JavaScript中添加函数`enterFullScreen()`，检查浏览器是否支持全屏，然后启用它：

function enterFullScreen(element) {
    if (element.requestFullscreen) { // 最新的 API，兼容大多数现代浏览器
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) { // Firefox
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) { // Safari 和 Chrome
        element.webkitRequestFullscreen();
    }
}

3. 当用户离开全屏模式时，也可以提供退出全屏的方法：

document.addEventListener("fullscreenchange", function() {
    if (!document.fullscreenElement || document.fullscreenElement === document.documentElement) {
        exitFullScreen();
    }
});

function exitFullScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

注意：并非所有浏览器都支持`requestFullscreen`等全屏API，你需要进行兼容性处理。