Switching between background videos

(David Guillermo Escalante Trinidad) #1

This is the website I already done:
http://davidescalante.businesscatalyst.com/public_storage/web_expande/

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:

Here is a video showing the visual artifacts:

(Jonathan Deutsch) #2

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.
(Hans-Gerd ClaĂźen) #3

another approach https://www.dropbox.com/s/suloveenhmzye7h/testvideos_xxx.hype.zip?dl=0

in your example: reset each video on each buttonclick, fade in out and play the current one …

(Mark Hunte) #4

Love this Example Hans ( @h_classen ) .

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 …

if(event.type === 'HypeSceneLoad'){
var waitForLoad = setInterval(function(){
if(myVideos.length === 3){
hypeDocument.startTimelineNamed('showButtons', hypeDocument.kDirectionForward); 
clearInterval(waitForLoad)}}, 500);
}else{

var videos = ['video1','video2','video3'];

var toPlay = element.id; 

videos.forEach(
function(currentValue, index, arr){

var el = document.getElementById(hypeDocument.documentId()).querySelector('.' + currentValue);
 if(currentValue === toPlay){
el.play();
hypeDocument.setElementProperty(el, 'opacity', 1, 0.0, 'easeinout');

} else {
hypeDocument.setElementProperty(el, 'opacity', 0, 0.5, setTimeout(function(){ el.pause(); el.currentTime = 0;}, 500));
 }
})



}
(Hans-Gerd ClaĂźen) #5

yeahh, might be nicer without fadeout - fade in …

(David Guillermo Escalante Trinidad) #6

WOW! Thanks for all the replies, all the codes works beautifully, I will do my best in use those in the final site.

Thanks a lot again.

(David Guillermo Escalante Trinidad) #7

Im facing a new problem when trying to use the code with my project:

While I am using MarkHunte codes, this happens no matter what I use, each time i change scenes, the scene reload the videos:

Breaking the smooth transitions we are aiming on each scene.

(Jonathan Deutsch) #8

This behavior is a bug. Changing scenes unfortunately will presently reset all videos, even those in a persistent symbol.

I thought there might be a quick fix, but came up empty this afternoon. You’re not the only one hit so I’d like to address it soon.

(David Guillermo Escalante Trinidad) #9

I found that playing the video in the body (document.body) kinda fix this this problem:
http://davidescalante.businesscatalyst.com/hype_forums/videjsbody/videjsbody.html
videjsbody.hype.zip (1.1 MB)

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.

(David Guillermo Escalante Trinidad) #10

I think I figured it out

I managed to make it work using simple HTML and CSS code, using JS only to switch / hide videos.

#11

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