Slideshow controls for video file

,
3

There's a couple ways to know if you're at the end: one would be to look at the video's currentTime in the advance function, or alternately listen for a "ended" event on the video.

(currentTime is probably easier with how you have it setup now though)

With your current code setup basically you need to reset the ChapNum variable. I suspect you probably ran into problems doing this because it is not a global variable. The reason it works for advancing forward is that the timeupdate handler captures this into the function, but there's no way to externally access it. So you could do something like make it a global variable (attach it to the window object) so different functions can access it, or even make it an attribute on the video itself, ala videoElement.setAttribute("data-chapNum", "4");.

I assume you want to play the video in reverse? I think you'll need to add a directionality flag with your current implementation to start. Also there's not a great way to play video backwards, but here is one solution:

This would definitely be useful to add to Hype; though its fraught with all kinds of problems in the lack of guarantees in video code and synchronization issues. There are already some solutions on the forums for syncing timelines with videos, like this one:

But I think there might be other solutions if you search more.

It looks like for you, having a one way from timeline to video sync would work out very well, In this regard, you could setup pause timeline actions, and just have the buttons set to continue a timeline forward or reverse.

There's no "timeupdate" callback equivalent currently on Hype-based timelines, but Hype v4 does have a "Math Equation" timing function that runs JavaScript and could be hacked as a way to synchronize a timeline with a video. The basic steps to set this up are:

  1. Create an element that has an animation which runs for the duration of the video (and starts at the same time).
  2. Make this element invisible
  3. Add a Math Equation timing function that sets the currentTime of the video to the t variable. It won't appear to be valid code as the video element won't really exist in Hype at that point, but this can be fixed by putting the code in a try block. The math equation would therefore be:
function (t, start, dur) {
  try {
    document.getElementById("video").currentTime = t;
  } catch { }
  return t / dur;
}

Then you just need to setup pause timeline actions, and the buttons.

Here's the sample with your video that I put together:

VideoShow-sync.hype.zip (185.7 KB)

This solution won't work if there's audio that needs to be played back, since it is just setting the time in the video. I'm not sure how well the video background downloading will also work with it. But it does let you ditch a lot of code for a more visual method.

1 Like