Disabling Video Playback, Pausing, Fast-Forwarding and Other Actions in Mobile Browsers

1. Disabling pausing, fast-forwarding and other actions

You can remove the controls attribute from the <video> element to stop users from operating it via the control bar. Then use JavaScript to force the video’s playback state, not allowing the user to pause or fast-forward.

<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");
  
  // Disable pausing, fast-forwarding and other actions
  video.controls = false; // Disable the controls
  video.play(); // Force playback
  
  // Listen for time update events to make sure the video isn't paused or fast-forwarded
  video.addEventListener('play', function() {
    video.currentTime = 0; // Reset the video time to keep the user from fast-forwarding
  });

  video.addEventListener('seeked', function() {
    video.currentTime = 0; // Reset the video time to keep the user from skipping
  });

  // Listen for actions such as clicking to pause
  video.addEventListener('pause', function() {
    video.play(); // Disallow pausing
  });
</script>

2. Using pointer-events to disable click actions

You can also use CSS to stop the user from interacting with the video controls. With pointer-events: none; the user cannot click the video, which in turn disables interactions such as playing and pausing.

<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; /* Disallow user interaction */
  }
</style>

3. Hiding the video control bar

Some mobile browsers show the video control bar automatically. To prevent this behavior, you can control it with 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. Completely blocking user interaction with the video

Setting the video element to fullscreen, or placing a fully transparent layer over the video, can also achieve the effect of preventing user interaction with the video.

<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>