点击播放按钮时自动全屏播放视频，是否有对应HTML属性实现？

云原生阿岚

2026-9-29

实现点击播放自动全屏的方案

目前没有原生HTML属性可以直接将播放和全屏操作绑定，这个需求需要配合少量JavaScript实现，符合浏览器的安全策略要求。

实现逻辑

浏览器的全屏API要求必须由用户主动交互（点击、触摸等）触发，点击播放按钮本身就是合法的用户交互，你可以在点击事件回调里同时执行全屏请求和播放操作，不需要拆分两次点击。

代码示例

方案1：自定义播放按钮

HTML代码：

<video id="targetVideo" src="你的视频资源地址.mp4"></video>
<button id="playBtn">点击播放</button>

JS代码：

const video = document.querySelector('#targetVideo');
const playBtn = document.querySelector('#playBtn');

playBtn.addEventListener('click', async () => {
  // 发起全屏请求，做浏览器兼容处理
  const fullscreenReq = video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen;
  if (fullscreenReq) {
    await fullscreenReq.call(video);
  }
  // 全屏完成后播放视频
  video.play();
});

方案2：复用原生video控件的播放按钮

如果你不想自定义按钮，要直接用浏览器自带的video播放控件，可以监听视频的play事件，触发时自动请求全屏：

const video = document.querySelector('#targetVideo');
let isFull = false;

// 监听全屏状态变更
document.addEventListener('fullscreenchange', () => {
  isFull = !!document.fullscreenElement;
});

video.addEventListener('play', async () => {
  // 非全屏状态下才发起请求，避免重复调用
  if (!isFull) {
    const fullscreenReq = video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen;
    if (fullscreenReq) {
      await fullscreenReq.call(video);
    }
  }
});