Video Wont Start Over On Scene Load

video

(justin_white_ux) #1

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.


#2

Hi Justin,

The video is not controlled by the timeline. It is there for previewing in Hype. When you preview in browser the video’s controls control it.

You could probably set the video source to autoplay in the Element Inspector on each scene!

Or maybe what you need to do is manipulate the video with some javascript. I’m not at my computer right now so can’t offer the exact solution.

Search through some of the post’s already about using javascript to control video.

D


(justin_white_ux) #3

DBear,

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.

I found this these HTML5 Video Basics

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:

Where do I add that?


(stephen) #4

This will require a bit of javascript. Here is an example shows how to play/pause a video using javascript: Creating Play & Pause Buttons for Video.

However, the API allows you to do a lot more than just play/pause (http://www.w3schools.com/tags/ref_av_dom.asp). I believe you will want to set currentTime On Scene Load.


#5

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.


(justin_white_ux) #6

Hey Daniel,

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.


#7

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(); 

That’s it!


(justin_white_ux) #8

Thank you! I’ve been digging around the minified JS (beautified in Atom) trying to figure this out. I appreciate your help.