skip to Main Content

I’m trying to hide a video when it is paused but the paused event is being triggered when you move the timeline on the video player as well. Is it possible to be able to adjust the video timeline without triggering the pause event?

var singleVideo = document.getElementById('single-video');

$(singleVideo).get(0).addEventListener('pause', function(){
         $('#singleVideo').hide();
  });

2

Answers


  1. After clicking the timeline, the video pauses for a few seconds and continues to play.

    HTML

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
        <body> 
            <p>Play and pause the video</p>
            <video id="single-video" height="200" controls="controls" preload="none" onpause="myFunction()">
             <source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Under_forvandlingens_lov_%281911%29.webm">
            </video>
        </body> 
    

    A tricky thing is just to add the async function and wait for a second to get the video pause status.

    JS

    async function getStatus(singleVideo) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(singleVideo);
        }, 1000);
      });
    }
    
    function myFunction() {
        var singleVideo = document.getElementById('single-video');
      //Get status
      getStatus(singleVideo).then(video => {
        if(video.paused){
          console.log("Stream pause");
          $(singleVideo).hide();
        }else{
          console.log("Stream not pause, Just drag/click timeline");
        }
      });
    }
    
    Login or Signup to reply.
  2. "Is it possible to be able to adjust the video timeline without triggering the pause event?"

    No. This is the standard procedure of how a browser works.

    "I’m trying to hide a video when it is paused but the paused event is being triggered when you move the timeline on the video player as well."

    You need to create your own custom controls. This way your own pause button’s function would hide the video, whilst scrubbing the timeline itself would only just control seeking.

    If you choose to use the browser’s built-in controls then you’ll have to think creatively.
    For example: When using the timeline, the pause event is followed by a seeking event, so just have a temporary listener for a seeking event during the pause event. Such "seeking" would let you know the video is not just paused and that it should remain visible. Without any extra "seeking" event, you can assume the video is truly paused

    An example of the concept:

    <!DOCTYPE html>
    <html>
    <body>
    
    <video id="single-video"  width="640" height="400" controls>
      <source src="movie.mp4" type="video/mp4">
    </video>
    
    <script>
    
    var singleVideo = document.getElementById('single-video');
    singleVideo.addEventListener("seeking", mySeek);
    singleVideo.addEventListener("playing", myPlaying);
    singleVideo.addEventListener("pause", myPause);
    
    //# Your main Seek handler function (if needed)
    function mySeek()
    { 
        /* if you have custom code for during Seek events */ 
        //alert("you did seeking..."); singleVideo.play();
    }
    
    //# During playback keep video visible
    function myPlaying() { singleVideo.style.opacity="1"; }
    
    //# Pause function also checks if a Seek event happens during Pause event
    //# eg: Hide video but IF a Seek also happens during, then keep video visible 
    function myPause()
    {
        singleVideo.style.opacity="0.1"; //# hide here...
    
        //# add temporary new Seek handler function (has alternate instructions)
        singleVideo.addEventListener("seeking", mySeekInPaused);
    
        //# force video visiblity & re-add main Seek handler function
        function mySeekInPaused()
        { 
            singleVideo.style.opacity="1"; //# keep visible
            singleVideo.removeEventListener("seeking", mySeekInPaused); //# not needed now
        }
    }
    
    </script>
    
    </body>
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search