1
<video>
2
  class="bg-video"
3
  src="bg-silent.mp4"
4
  muted
5
  autoplay
6
  loop
7
  preload="auto"
8
  controlslist="nofullscreen nodownload noremoteplayback"
9
  playsinline="true"
10
  webkit-playsinline="true"
11
  x5-playsinline="true"
12
  x5-video-player-type="h5-page"
13
  x5-video-player-fullscreen="false"
14
  x-webkit-airplay="deny"
15
  disablepictureinpicture
16
</video>

1
/* 背景视频容器一定要铺满页面 */
2
.bg-video-wrap {
3
  position: fixed;
4
  top: 0;
5
  left: 0;
6
  width: 100vw;
7
  height: 100vh;
8
  overflow: hidden;
9
  z-index: -1;
10
}
11
.bg-video {
12
  width: 100%;
13
  height: 100%;
14
  object-fit: cover;
15
  pointer-events: none; /* 关键：禁止用户点击视频区域，彻底杜绝触发全屏 */
16
}
17

18
/* 隐藏WebKit内核全部的掉价原生控件 */
19
.bg-video::-webkit-media-controls-enclosure {
20
  display: none !important;
21
}
22
.bg-video::-webkit-media-controls-fullscreen-button {
23
  display: none !important;
24
}
25
.bg-video::-webkit-media-controls-play-button {
26
  display: none !important;
27
}
28
.bg-video::-webkit-media-controls-timeline {
29
  display: none !important;
30
}
31
.bg-video::-webkit-media-controls-mute-button {
32
  display: none !important;
33
}
34

35
/* 特殊屏蔽火绒控件 */
36
.bg-video::-moz-media-controls {
37
  display: none !important;
38
}

1
const video = document.querySelector('.bg-video');
2

3
// 重写全屏请求方法，拦截任何强制进入全屏操作
4
video.requestFullscreen = () => Promise.reject('禁止全屏');
5
video.webkitRequestFullscreen = () => Promise.reject('禁止全屏');
6
video.mozRequestFullScreen = () => Promise.reject('禁止全屏');
7

8
// 监听全屏切换事件，一旦意外进入立刻强制退出，断尾求生
9
document.addEventListener('fullscreenchange', () => {
10
  if (document.fullscreenElement) document.exitFullscreen();
11
});
12
document.addEventListener('webkitfullscreenchange', () => {
13
  if (document.webkitFullscreenElement) document.webkitExitFullscreen();
14
});
15

16
// 专门的微信JS桥就绪后自动唤醒播放
17
document.addEventListener('WeixinJSBridgeReady', () => {
18
  video.play().catch(e => console.log('播放拦截：', e));
19
});
20

21
// 页面触摸唤醒播放，安卓X5兼容最沙币，这样基本不会弹出播放器
22
document.addEventListener('touchstart', function oncePlay() {
23
  video.play();
24
  document.removeEventListener('touchstart', oncePlay);
25
});