Transparent + VideoBox Not Always Playing

Ask the community
,
1

For some reason the transparent video and videobox do not always play. Also, javascript animations do not always loop, they stop.

Is this an iOS thing, or is this a thing with Wix Studio?

Example: small transparent video on screen, loads, but doesn’t play all the time. Sometimes it does, sometimes it doesn’t.

Example: Using videobox as background with a looping animated element on top. Sometimes the element on top is not animating, then will, but then stops again. Sometimes the video isn’t playing. Especially if you leave the browser and come back, but sometimes on a refresh.

Is anyone else having this issue? I don’t see any reason for this to be occurring…

Thanks

2

Hi, fresh_imp !!

Perhaps, as such things do happen. Simply put, continuously running animations can put a strain on the browser, so it may stop animations when they’re not in view. To address this, using Velo code, you could add a process that checks if the videobox or other elements are playing when they’re visible on the screen, and if not, triggers playback. Here’s a simple code example to demonstrate:


$w("#myVideoBox").onViewportEnter(() => {
    if (!$w("#myVideoBox").isPlaying) {
        $w("#myVideoBox").play();
    }
});

$w("#myVideoBox").onViewportLeave(() => {
    if ($w("#myVideoBox").isPlaying) {
        $w("#myVideoBox").pause();
    }
});
1 Like
3

Ah, that is a very fair point. Was just thinking I shouldn’t have to do that, but I guess setting them all to not automatically play and then controlling when they do and don’t would be better. Just seems a little buggy by default. Hopefully, it’s not server side issue.

4

I think that did the trick for my video issues. I’ll keep testing, but so far so good.

I know it’s excessive: These issues became noticeable when I put a video background in the menu background. It would affect of video players on the page. I think the video on the page is still playing even when covered by the menu, so perhaps a more thorough approach would be to pause those when the menu is open.

I still have an issue with the js loop animations on an object. It works the first time you open the menu, and then after closing it once they no longer play. Do you know if I can target that animation as is from the builder, or will I need to recreate it all in Velo?

Also, I have another unique issue regarding the video. On iOS in both Safari and Chrome, if you lock the phone and then come back, the video will no longer play. With the transparent video, leaving view and coming back starts again, but with the regular videoBox it doesn’t start again. Do you know if there is a way to call a function on that returned to the browser state?

5

I’m glad to hear that it worked! :laughing: :raised_hands: As for the “menu” you mentioned, I’m not sure what you mean by it (hamburger menu? megaMenu?), but if it exists in the header, it should be accessible from masterPage.js. If that’s the case, you could determine whether the menu has been opened or closed.

A simple approach could be to set up an onClick event on the menu element to monitor its open/close toggle action. This event could then trigger the reconstruction of the loop animation, which I believe is possible through Velo (though I can’t say for certain, as I haven’t done it before, but I think there’s an effects API in Velo).

https://dev.wix.com/docs/velo/api-reference/$w/effects/introduction

Regarding the issue where the video playback stops when you lock your smartphone and then unlock it, this might also be resolved using a similar approach as the code you shared earlier. You could try applying the same logic to the entire page element. In other words, set up an onViewportEnter() event for the entire page element so that when it is triggered, the video playback starts.( I can’t say for certain, as I haven’t done it before)

If this doesn’t work, consider implementing a custom event listener for unsupported events in Velo using custom elements. :wink:

6

I’m using a hamburger menu.

Well, I haven’t yet, but I think setting up click events would be wise. I think it’d be nice to have a “start as paused” option in the Studio builder on videos. It might eliminate some potential issues. Chrome is changing video support in a way, perhaps some of these issues are related to those changes.

I couldn’t get the allEffects property to return anything on an animated object, so I think the builder animations will need to be interacted with in a different way. I’m probably not going to look into it. I’ll either accept the small bug, or animate with js.

I tested some things with the onViewportEnter() event, and it does not respond to locking a screen and returning or minimizing the browser and coming back. So, I’m not sure about that. Again, I’ll probably just accept it as with the onViewportEnter() at least makes it play if the scroll it off screen and back.

You’ve been a great help. I really appreciate it!

1 Like