I need to create a player for a single piece of video that performs much like a PowerPoint presentation. So the video plays, pauses by itself at the end of each slide (section of video), and can then be prompted on - etc etc. Then also the ability to be able to jump back a slide (essentially a ‘go-to-time-in-video-and-play’ type function.
I have created a piece of dummy video to demo this and have set up the pauses within javascript. I have also added the ‘advance slide’ right arrow which starts the video playing again.
In order to complete I need 2 things:
1: When you click the right arrow right at the end on the last slide, the sequence restarts. But as the browser is remembering the previous pass, there are no pauses. Everything needs resetting. Any ideas on how best to do this?
2: My left arrow (currently redundant) needs to be able to jump back to the previous stop point and automatically start playing… Would it be possible to help with this also?
I would very much appreciate your time and thoughts.
Another question (sorry…!). Another useful thing would be the ability to sync the hype main timeline with the video exactly so that any interactive bits and pieces could be dealt with at certain timeline frames.
So if a video was created at 30fps, could hype be told to match its main timeline play head to this?
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:
Create an element that has an animation which runs for the duration of the video (and starts at the same time).
Make this element invisible
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:
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.
The more visual solution at the end is bloody great! Flawless in Safari but frustratingly though, it’s very flakey in Chrome and Firefox. Such a shame…!
I can’t see any evidence of the ‘Math Equation’ part within your Hype doc - can you confirm that this wasn’t added in?