Adjusting timeline in html5 video triggers pause event

Luke Seall 0
Viewed 25

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();
  });
html5-video jquery javascript
2 Answers

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");
    }
  });
}
Creek0

"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>
VC.One0
Related