How can I track HTML5 Video Control event?

Question

I'm trying to track the event of an HTML5 Video, specifically the pause/play on the default control bar (for non-mobile Chrome and Safari).

Here's my test code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Video Test</title>
</head>
<body>
    <video id="video" width="320" height="240" src="http://www.w3schools.com/tags/mov_bbb.mp4" controls>
         <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    </video>

    <script>
    var video = document.getElementById("video");

    video.onclick = function(){
        if(!this.paused) {
            this.pause();
            console.log("paused");
        } else {
            this.play();
            console.log("playing");
        }
    }
    </script>
</body>
</html>

If I toggle play/pause in the center of the video, the event fires just fine.

The problem is that when I click the Pause/Play button on the default control bar (lower left), although the video pauses/plays, the log does not display (I assume the event does fire since it pauses/plays).

I've not found a reason for the log to not display and was hoping someone to point me in the right direction.

In my actual code, depending on whether the video is paused or played, a timer function will be called (or killed).

Thanks.

Stephen

Mouse events are actually not visible on the default control bar. You'd have to make your own controls. But why are you trying to check it ? If you want to know when the video has been paused, there is a pause event. This button is not the only way for your user to pause the video (spacebar, click in the middle of the video...) — Kaiido
My full code dealt with your concerns. This is a client request for a trade show touchscreen presentation. When the presentation is idle, it goes back to the main screen. Events set a timer when idle. I appreciate the info, and if testing proves this to be a problem, I'll push to remove it. — Stephen

Canolyb1 Canolyb1 · Accepted Answer · 2017-02-23T21:30:17

Your adding the onclick event to pause and resume the video but you're not handling the pause and playing events. Those events are triggered when you pause an play from the control bar.

This is how I would do it:

var video = document.getElementById("video");

function StartPauseHandler(e) {
    if (e.type === "pause") {
        console.log("paused");
    } else if (e.type === "playing") {
        console.log("playing");
    } else {
        if(!this.paused) {
            this.pause();
        } else {
            this.play();;
        }
    }
}

video.addEventListener("click", StartPauseHandler);
video.addEventListener("pause", StartPauseHandler);
video.addEventListener("playing", StartPauseHandler);

How can I track HTML5 Video Control event?

1 Answers