js点击控制video网页全屏

要在JavaScript中实现点击控制视频网页全屏，可以使用HTML5的Fullscreen API。以下是一个简单的示例代码：

HTML代码：

<video src="myvideo.mp4" id="video-player"></video>
<button id="fullscreen-btn">全屏</button>

JavaScript代码：

const videoPlayer = document.getElementById('video-player');
const fullscreenBtn = document.getElementById('fullscreen-btn');

// 监听全屏按钮的点击事件
fullscreenBtn.addEventListener('click', () => {
  if (document.fullscreenElement) {
    // 如果已经全屏，则退出全屏
    document.exitFullscreen();
  } else {
    // 否则进入全屏
    videoPlayer.requestFullscreen();
  }
});

// 监听全屏状态的改变事件
document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    // 如果进入了全屏，则将视频的宽度和高度设置为屏幕的宽度和高度
    videoPlayer.style.width = screen.width + 'px';
    videoPlayer.style.height = screen.height + 'px';
  } else {
    // 否则恢复视频的原始尺寸
    videoPlayer.style.width = '';
    videoPlayer.style.height = '';
  }
});

这个示例代码中，我们使用了`<video>`元素来创建一个视频播放器，并将其ID设置为“video-player”。同时，我们使用了一个按钮来控制全屏，其ID为“fullscreen-btn”。

然后，我们使用JavaScript来监听全屏按钮的点击事件，以及全屏状态的改变事件。在点击事件中，我们使用`requestFullscreen()`方法来进入全屏模式，或使用`exitFullscreen()`方法来退出全屏模式。在全屏状态改变事件中，我们根据全屏状态来设置视频的宽度和高度，以确保它始终填满整个屏幕。