Screen goes blank when changing videos visibility

Using JavaScript with Hype
1

==========

Added to the dropbox folder the file gasomatic18.zip

This is the full fixed version of the site, it lacks things like the smartphone version and I will add to the final release the ability to control the jumps with the keyboard arrows, but I am sharing the hype version with the stable solution to the problem discussed here.

In short: The solution is to swap the videos until the current playing video ends playing, additionally I swap the zindex of the two videos used per each scene, not sure if this is really necessary, but more safety measures cant hurt… right?

==========

As the title says, I have a list of .mp4 files in “Head HTML”.

Then using JS I control their visibility, play and pause status.

The thing is that when I switch between one video and other other visibility, the videos goes blank for a brief moment, sometimes displaying the previous video during this brief time.

A video of this strange behaviour can be found here: https://youtu.be/mBgOKF2cdPw

I am going crazy over this. I used to experience this problem in the past but I no longer can afford to ignore it.

Here you can find the live site:

I already tried to set a setTimeout so the style.visibility = "hidden"; is delayed, but that didn’t fix it.

I also found someone experiencing similar problem in Stackoverflow:

You can find the hype files here:

gasomatic4.7z is the Original design I was using, by picking ALL the videos and set them to hide, and latter only set to visible to the video I want to play.

gasomatic6.7z is the current one I am trying to use, by dynamically only switching the current video as the target to hide, and with some delays.

The reason I am sharing both, is because, while gasomatic4 is more of a brute force aproach, it might be easier to understand than gasomatic6, still in both can be experienced the same problem.

Is a bit of mess, I appreciate any help on this.

2

I’m not familiar with the “.7z” format - and my Mac does not appear to have an app to open it. (Do You have a suggestion?)

or
Would You post a “.zip” version?

Thanks.

3

Sure, I replaced the .7z with zip files.

The scrolling behaviour can be found under main_variables()

stop_allvideos() is where the video hide happens

masterscrollcontroller() is where, depending on the scene, the reverse and forward videos are assigned.

4

Hi David!

It’s bedtime here in California but I thought to give things a quick run through - and…

I have no problems with the video switching either on the website or with the Hype file “Gasomatic6”. It looks clean to me - maybe because I’m tired! :upside_down_face:

5

Oh yeah, it looks good at first, specially if you try it with Safari, but in Chrome it happens after jumping 3 or 4 scenes.

Its even more noticeable in slower computers like laptops, so it seems related to the CPU timing.

6

So I ran the page in Chrome in an up and down cycle five times (“normal” scrolling speeds) - all looked good.

I also was checking the Mac’s “Activity Monitor”. The attachment below shows a typical readout… but a few times the “Google Chrome Helper (Renderer)” exceeded 120 MB of memory. The CPU % usage was in the upper '30s. iMac, High Sierra; 16 gigs of RAM & 1 gig for the graphics.

Screen Shot 2020-03-05 at 10.13.44 PM

And now off to the slumber zone. :zzz:

1 Like
7

I recorded a video where you can find the video strange behaviour I am talking about:

Have a good one.

8

Ok, I think I got it.

I made the target video to hide to get a zIndex of -1 and the active video a zIndex of 0 with a delay of 100ms before the video hidden property triggers.

So far seems to be working smoothly, more testing is required tho.

I added the hype file that includes these changes in the gasomatic7.zip

1 Like
9

I was able to reproduce it as you showed in the video a couple of times. The document is quite complex so it is hard to specifically say the cause, but visually it does look like the browser is simply having a hard time completing all operations on the same frame draw. Your approach of working around via other means sounds reasonable to me. (Sorry this doesn’t help more!)

10

Thanks for your time on this. While it seems that I managed to improve the experience, on less capable hardware the experience really suffers from lags and other performance that are related only to the way I setup the videos.

I have noticed too that If I left the browser alone for some times (lets say 5 minutes), the videos just disappear without warning and there is no way to recover from that unless you refresh the site, so definitely there is room from improvement but I believe this is as far as I can go with my current coding knowledge.

My client saw this site: http://rappi.ouiwill.com/
And they asked me to create the motion graphics trying to get the same visual experience, but the one on the rappi site is unable to go backwards and I found easier to split the videos in segments.

I tried using backstretch since I have used it before for background videos, but the screen goes blank for a brief moment each time I swap videos.

I found Bigvideo.JS as an alternative, I even found somoeone here sharing a hype file with a functional bigvideo site, but I couldn’t figure it out how to change videos.

11

restricting to one forward- and one backwardvideo?!
so you’d only run into the issue when switching the direction …

1 Like
12

This time you where faster. Same thought here. Switching would involve simple logic. Something along the lines of this:

FlippedTimeIndex=durationOfVideo - currentTimeIndex

To pause the video one could listen to videoProgress or use cues / tracks

13

I am going to try your idea, I by using the code I found here:

I will try to trigger the video change only when the video is ready to play. Im currently figuring it out how to effectively keep only 3 videos loaded (the one currently playing, the one that will play in the next scene and the one in reverse in case the user wants to go back).

14

Hi David!

I have looked at your video many times now (still no glitches as per your video capture example).

But I have spent the last several run throughs carefully examining how the elements move. To my eye all the elements look 2D-2.5D as presented.

Was there a reason why You went the video route... such as it already existed and You were expected to use it?

There have been several posts in the past on this Forum showing 2.5D effects - just using Hype's native capabilities - that would appear to "fill the bill" for the type of animation shown in your original post.

Here are two that I archived:

Live Demo.

Hype file: Space-3d effect 2.hype.zip (23.1 KB)


A different effect:

The "original" is a cube rotation in a Scene. I adapted this original file above to a Scene transition - as the OP requested (v2 in the thread). The "Live Demo" below is now v4. They all run on a Swipe action.

Live Demo.

Hype file: cube_transition_v4-swipe.hype.zip (203.9 KB)


In any event these are examples that might serve You well in future projects.

1 Like
15

But why three Videos? One for Forward and one for Reverse are Not enough? You’ll sync Process when a Section ist completed …

16

Yeah, sorry, you are right, the site is going to load only 2 videos.

The one that actually plays during scroll stays as passive, that’s why I was considering that one, but since that video is already loaded I shouldn’t worry about that one.

Anyway, as far as I can tell, I think I finally managed to fix it:

(Reverse is temporally disabled until I complete cleaning up the messy code I have right now)

Is only disabled in this test site, the one in my main post have reverse scrolling enabled.

Having only two videos loaded, each one in 2 different divs:
one with z index -1
The other with -2

Dynamically I am alternating the current video to play on the top div while sending the inactive video to the bottom div, so when the video swap occurs, there is no blank space since the inactive video stills in the background.

Using $("#" + dinamycwrapperPLAYING).bind("ended", function() I only load the next video as soon the one currently playing stops, THAT is what seems that got rid of that strange glitching.

The whole code that fixed the glitching is this:

// PLAY VIDEO BLOCK ▼
hypeDocument.getElementById(dinamycwrapperPLAYING).play();
$("#" + dinamycwrapperPLAYING).bind("ended", function() {
    hypeDocument.functions().scroll_ON(hypeDocument, element, event); //-------- ACTIVATE SCROLL
    // PREPARE NEXT VIDEO
    $("#" + dinamycwrapperNEXT).attr('src', '${resourcesFolderName}/' + dynamicNext);
    $("#" + dinamycwrapperNEXT)[0].load();
});
// PLAY VIDEO BLOCK ▲
17

It was a very specific request of this client, but I was always interested in mix motion graphics with web content, and Hype usually is really good for that, so I took this like a challenge to see how far I can push this kind of content.

And yeah, for the smartphone version there is no argument there, it will be a 2D experience, something like this thing I did in the past:
http://zanate.com.mx/public/im_html5_animator/

I think is the “wow” factor the client is going for, while there are more elegant solutions like the one that the Rappi site used (using only 1 video), I think that for now is beyond my coding abilities.

18

I added to the dropbox the file gasomatic18.zip

It contains what it seems the solution to the problem, I cleaned as much as I could. While I still believe some work can be done to improve this sine my coding solutions are usually not very elegant, at the same time, at its current state, it should save someone else from the nightmare I have been.

2 Likes
19

I actually really like the effect and with bandwidth getting bigger by the day and background video allowed on mobile this is certainly something I want todo too. Very inspiring!

20

The site my client used as reference actually plays the video in a smartphone:

I wont do that, first, because that is like black magic to me, and second, because I want to keep it as light as possible for the mobile experience.

Thanks for the kind words.

1 Like