I have a project with a root scene. Call this the Index Scene.
The index scene has 20 buttons.
Each button jumps to a scene with a 1920x1080 video.
The video in each scene can be dismissed (return to index scene).
I have an event set for On Scene Load, Go to Time in Timeline, Main TimeLine, 00:00:00 (Start the video from 0:00)
I also have another event On Scene Unload, Go to Time in Timeline, Main Timeline, 00:00:00 (The scene is unloading, so it should go to the beginning, and stop as it’s unloaded by that time).
What is happening is this…
index loads, I click 1 of the 20 buttons, it jumps to the appropriate scene, I click the video 15 seconds in to dismiss it (return to index), that works fine. However, when I click the same button again, it starts the movie/scene where it left off, 15 seconds into the movie. I need the scene/movie to start from the 00:00 every time it plays/loads.
The videos are set to autoplay. When the user clicks the video to return to the index scene, if they select the same video, it picks up where they left of.
imagine if 5 different people clicked the first button and each only watched 20 seconds. The first user sees 20s of the video(00:20), the second user the next 20s (00:20-00:40), the third user (00:40-01:00) and so on.
So.. No luck finding what I'm looking for. It should be straight forward. I just need the video to start at ZERO every time the scene loads. Does that really require several lines of mystery JS to be added somewhere? The reason I say "somewhere" is because I haven't the slightest of clues where to add this JS.
Media Fragments
Adding a media fragment to the media URL, you can specify the exact portion you want to play. To add a media fragment, you simply add #t=[start_time][,end_time] to the media URL. For example, to play the video between seconds 10 through 20, you could specify:
The problem with playing video at time 0 is that the video is typically not loaded into memory. When it appears in the DOM, it will start preloading ASAP, but will take more than 0 seconds from loading to the first frame. You might be able to get around this if you preload it in a previous scene (just put it off the scene and make sure autoplaying is unchecked). This will load it into memory and prime the cache, and in desktop browsers should speed up loading wherever else you have the video.
The way I have it right now, it works well and starts instantly when it switches to the Movie Scene.
When I switch BACK to the index and click the same button again, it loads the same Movie Scene instantly, though this second time, it starts where it left off, say 10 seconds in. It starts back up where ever it was when I went back to the index scene.
So, theres all this talk about adding java script. How does one do this, or where in the code would I do this? I have all these minified JS files and mostly empty HTML file.
To control your video and define how it should start when loading a scene, first, set a Unique Element ID in the Identity Inspector for your video. This lets you do things to it with JavaScript's HTML5 video API. If you were to set an ID for your video as 'video1', you would need to run the following JavaScript 'On Scene Load'. Within Hype, in the Scene Inspector, add the following JavaScript to run 'On Scene Load':
// Make a convenient Variable for the video
var mediaElement = document.getElementById("video1");
// Optional: Pause the video (if it is playing)
// mediaElement.pause();
// rewind the video.
mediaElement.currentTime = 0;
// Play the video again
mediaElement.play();
In my case, find it a bit better to trigger the rewind on scene unload.
Becomes a bit tricky to make a nice transition between two scenes with videos outplaying.