I used backstretch JS script for the background videos, also it was easy to make since I can control WHEN certain video is played.
BUT I have reports that it have some animations issues when using Safari, so I decided to move the videos back to hype and control them directly with hype tools.
BUT #2, using hype for the videos results in some artifacts when switching between videos, here you can find the hype file Im using for the test:
What is showing up is the end frame of your video. Video controls like play() might not reset back to the beginning and show that frame immediately, which is what is happening.
There’s no quick fix solution, but here are a couple ideas that might help:
instead of triggering play, add a listener for the timeupdate event and then set the currentTime of the video to 0. When your callback gets the event, then you can do the video swap and play.
listen to the video’s ended event, and then put up a static image of the end frame above the video, and set the currentTime to 0 so it is ready to go.
And the included example of using the new callback event. Getting access to this event is going to be so handy and is something many of us have wanted to be able to do.
I noticed in the example that there was a blank transition when the videos changes over.
To fix this I got rid of the second timeout and combined it’s code into the first. This seemed to fix it …
Vide JS is not a good solution since it doesn’t handle very well video switching, but at least its not as buggy in safari as BackStretch is.
I used Vide JS (https://vodkabears.github.io/vide/) since Im quite useless on JS Im still trying to figuring out how to target the body for videos using h_classen and MarkHunte codes.
I won’t attempt to explain the following code at the bottom… but this is all it took to show multiple videos in a project I recently created - seamless hide & show in a selection based format (the “slideDown” is an effect - could just as easily have been a straight cut). This is a jQuery solution. While I have learned a lot from vanilla JavaScript on this Forum I am amazed that so few use jQuery.
If You are a JS Guru why bother. But if You are are not - jQuery rocks. Simple. Tight. Powerful. The elegance of HyperTalk in a modern accessible format.
Glad You found your simple solution!
//bh_partVidName in initSceneVars() - in the Head HTML`
var snip = element.id.slice(-1);
bh_selectedVid = hypeDocument.getElementById(bh_partVidName + snip);
$("#CloseVideo").show();
$(bh_selectedVid).show();
$("#visited_Episode_"+ snip).show();
$("#link_Episode_" + snip).hide();
bh_selectedVid.play();
$(exhibitBlock).slideDown(1500);