在手机浏览器中禁止播放视频、暂停、快进等操作

2024-10-23

字数统计: 591字 | 阅读时长: 2分 | 本文总阅读量64次

1. 禁止暂停、快进等操作

可以通过将 controls 属性从 <video>元素中移除，防止用户通过控制条进行操作。然后通过 JavaScript 强制控制视频播放的状态，不允许用户暂停或快进。

<video id="myVideo" width="100%" autoplay loop>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<script>
  var video = document.getElementById("myVideo");
  
  // 禁止暂停、快进等操作
  video.controls = false; // 禁用控件
  video.play(); // 强制播放
  
  // 监听时间更新事件，确保视频不被暂停或快进
  video.addEventListener('play', function() {
    video.currentTime = 0; // 重置视频时间，避免用户快进
  });

  video.addEventListener('seeked', function() {
    video.currentTime = 0; // 重置视频时间，避免用户跳跃
  });

  // 监听点击暂停等操作
  video.addEventListener('pause', function() {
    video.play(); // 禁止暂停
  });
</script>

2. 使用 pointer-events 禁止点击操作

你还可以通过 CSS 来禁止用户与视频控件进行交互。通过 pointer-events: none; 可以使用户无法点击视频，进而禁止播放、暂停等交互操作。

<video id="myVideo" width="100%" autoplay loop>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<style>
  #myVideo {
    pointer-events: none; /* 禁止用户交互 */
  }
</style>

3. 禁止视频控制条显示

一些手机浏览器会自动显示视频控制条。为了禁止这种行为，可以通过 CSS 控制：

<video id="myVideo" width="100%" autoplay loop>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<style>
  #myVideo::-webkit-media-controls {
    display: none !important; /* Safari/iOS */
  }
  #myVideo::-moz-media-controls {
    display: none !important; /* Firefox */
  }
  #myVideo::-ms-media-controls {
    display: none !important; /* IE/Edge */
  }
</style>

4. 完全阻止用户与视频交互

通过将视频元素设置为全屏，或者完全覆盖在视频上的透明层也可以实现禁止用户与视频交互的效果。

<video id="myVideo" width="100%" autoplay loop>
  <source src="your-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<div id="overlay" style="position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(255, 255, 255, 0); pointer-events: all;"></div>

本文作者： 艾瑞可erik
本文链接： https://erik.xyz/2024/10/23/rohibit-video-playback/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！