I am making an interactive project with a lot of videos. 90% is done, but i’m running into some issues.
I have a 4 scenes. Scene 1 has a video playing in a loop with some nice effect and 3 overlay buttons. The buttons trigger scene 2,3 and 4. All three have also a video playing and a close button to jump back to Scene 1 (the overview screen).
When I jump from scene 1 to 2, 3 or 4 everything is working perfectly. When I click the close button, I do jump back to scene 1, but the video is not starting from the beginning. When I click on one of the buttons on scene 1 (the ones that jump to 2,3 or 4) I do jump to the selected scene, but the video continues at the spot where it ended. So lets say I close scene 2 to go back to scene 1 and the video was at 30 seconds while I did this. The next time I jump back to scene 2 from scene 1 the video on scene 2 will play starting from 30 seconds. How can I make sure the video always starts from the beginning again?
The basic recommendation would be to add a unique Element ID to the video element. Then with an On Scene Load action, Run JavaScript that would call hypeDocument.getElementById("yourVideoUniqueElementID").currentTime = 0;. However this advice might not apply to your document; so if you are able to post it that would help!
It's unclear how to reproduce this issue because your document doesn't have any labels -- I assume you're clicking on the white boxes in the 'Build up' scene?
You don't need to create a 'start timeline' timeline action in your scenes. Timelines start automatically when you load them
You can control your videos by giving them Unique IDs:
So if the video has a unique ID of video1, then you can reset it's time to be 0 by running this as an 'On scene load' javascript function:
//get the id of the video
var mediaElement = hypeDocument.getElementById('video1')
// go to the start seconds:
mediaElement.currentTime = 0;
mediaElement.play();
The content of the presentation is not final yet, but the structure is there.
It should auto play the first movie, but as that doesn’t work in Chrome I decided to add a button (this button will be replaced with a waaaaaaay better one). After scene 1 is done, it jumps to scene 2. Here the mainscreen builds up. The 3 white labels will become thumnails and when clicking on them, you should be able to view a video. These videos are not final yet, but I made 3 new scenes to jump to. My JavaScript knowledge is on a very low level, therefor i’m trying to do it without extra javescripting as much as possible.
Your solution however makes sense and I will try it out. Assuming it still counts after reading how the presentation should work?
If the video is muted and set to autoplay, it should be able to play when you load the scene.
You could then have an additional button that 'unmutes' if you need the video to autoplay. But ideally, you would just allow the user to click 'play' on an unmuted video to get them the full experience. Browsers these days are not allowing videos to play with audio unattended (and without any user input). If you have a scene that immediately plays a video (unmuted), that is fine, but you need to use an 'instant' scene transition that is triggered by a click to load the scene and have audio playing. Does that make sense? The basic rule of thumb is that a click or a tap is the only thing that can play audio.
Yeah the video not playing in chrome rule with audio I knew indeed. In this case it does have audio, therefor the button was used so that the user can click and the video plays with audio.
I’m now figuring out the timeline reset.
I gave the videos the unique element ID.
Then I went to scene “video 3” and went to Scene inspector and Clicked + behind “on scene load” I added the code you sent me and changed Video 1 into Video 3 as this was the video 3 scene. Wanted to test it, but it doesn’t reset, the timeline when coming back. It keeps playing were it was left off. I will keep trying!
I actually did the above yesterday when having a quick look at your file. I put the javascript action on your button on scene one.
But did not post as I was not sure you wanted the sound when first played or not.
Its is possible that when you do this all other unmuted videos can stay that way as the initial user action in most cases shows the browser that playing sound is ok.
The videos are not really part of the timeline -- does the .currentTime = 0; function work for you? Setting this on scene load should ensure that the video always starts from zero.
