CODEWITHSUNDEEP
javascriptjqueryhtml
Subpar Web Dev
Subpar Web Dev

Reputation: 3260

How to make events fire when an HTML video reaches a certain time mark?

I'm wondering whether this is even possible, and if so, how it would be done. So I have an HTML5 video on my page 

<video id="ssvid">
      <source src="assets/Cisco_SmartStack_04012016_NoText_2.mp4" type="video/mp4" />
</video>

and let's say I want functions to be invoked at the 2-, 13- and 15-second marks of the video playing. I'm trying to create an object like

$(function(){
    window.VidHandler = (function(divid){
        this.divid = divid;
        this.PauseFunctions = [
            {
                SecondMark: 2,
                OnSlideTo: function () { },
                OnSlideAway: function () { }
            },
            {
                SecondMark: 13,
                OnSlideTo: function () { },
                OnSlideAway: function () { }
            },
            {
                SecondMark: 15,
                OnSlideTo: function () { },
                OnSlideAway: function () { }
            }
        ];
    })("ssvid");
});

but I don't know if JavaScript has an "ontimemark(2)" type of event listener that I can set up. Will I have to create a setInterval to do this?

Upvotes: 7

Views: 3843

Answers (3)

Greekdude
Greekdude

Reputation: 1

The answer by @zer00ne is nearly there. timeupdate doesn't update every second, it's dependent on the user agent. So, we shouldn't be self incrementing a tick, we should just pass the latest currenttime which represents the current playback time in seconds.

According to Mozilla:

  • timeupdate frequency:

The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.

The event frequency is dependent on the system load, but will be thrown between about 4Hz and 66Hz (assuming the event handlers don't take longer than 250ms to run).

  • currenttime:

A double-precision floating-point value indicating the current playback time in seconds.

If the media is not yet playing, the value of currentTime indicates the time position within the media at which playback will begin once the play() method is called.

References:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

How to make events fire when an HTML video reaches a certain time mark?

Use currentTime and timeupdate see the demo utilize both.

but I don't know if JavaScript has an "ontimemark(2)" type of event listener that I can set up.

timeupdate

Will I have to create a setInterval to do this?

No, see Snippet below.

  • Every timeupdate event fires the console.log

  • vidHandler() uses a switch to fire on second marks 2, 13, and 15.

  • You can replace the console.logs with the slide methods.

  • By the looks of it, currentTime looks more like 1sec = 3.5sec? Or the reported duration for the video element is inaccurate.

Snippet

  var ssvid = document.getElementById('ssvid');
  var tick = ssvid.currentTime;

  ssvid.addEventListener('timeupdate', function(e) {
    console.log('currentTime: ' + tick);
    tick++
    vidHandler(tick);
  }, false);


  function vidHandler(time) {
    switch (time) {
      case 2:
        console.log('2 second mark');
        break;
      case 13:
        console.log('13 second mark');
        break;
      case 15:
        console.log('15 second mark');
        break;

      default:
        return false;
    }
  }
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<video id="ssvid" controls width="300">
  <source src="http://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4" type="video/mp4" />
</video>

Upvotes: 5

Tony Crowe
Tony Crowe

Reputation: 21

Maybe you can try using the video currentTime property inside a timer. There is also supposed to be a progress event. It is outlined in this document: https://www.w3.org/2010/05/video/mediaevents.html

Something like this may work:

    // maybe you can select this by id in jQuery rather than DOM
var video = document.getElementsByTagName('video')[0],
    lastPf // reference for slide away;

video.onprogress = function() {
    PauseFunctions.forEach(function(pf) {
        if (video.currentTime > pf.SecondMark) {
            if (lastPf !== undefined) {
                // slide away the previous thing
                lastPf.OnSlideAway();
            }

            // slide to the new one
            pf.OnSlideTo();
            lastPf = pf;
        }
    });
};

Do you think that will work?

Upvotes: 2

Related Questions