Hello wonderful Wix forum people,
I need to keep videos playing in the background when users navigate to other window tabs. Currently the videobox stops playing & restarts when they return to the tab - this causes problems with my program timings.
Most advice suggest changes to browser settings and/or extensions - but this is not an option for my application.
Q. can video be kept playing using velo code?
Thank you
When you say “keep playing” do you mean the user will be able to listen to it while the webpage is no longer there? If that what you meant, so the answer is no. It’s impossible.
But if all you want is to save the timestamp and start from it after re-navigation to this page - then yes. It won’t actually keep playing, but you can use wix-storage (session or local) to save the time, extract it and start from it.
See:
https://www.wix.com/velo/reference/wix-storage
https://www.wix.com/velo/reference/$w/videoplayer/currenttime
https://www.wix.com/velo/reference/$w/videoplayer/seek
https://www.wix.com/velo/reference/$w/videoplayer/play
Maybe you’re going to ask, how would I know when the user leaves the page, so I’ll be able to save the currentTime?
So there’s more than 1 way to do it:
One way will be to save the currentTime every 1 second using setInterval.
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
The other way which is more complicated, will be by using custom element and onunload event listener.
I’m using videobox which doesn’t have the functionality of video player.
But that is not the issue. I just want the video to keep playing when the user moves to another tab,. I don’t want pauses or resume playing from a given time.
Example, you are watching a movie, but then you click on a news tab or check email…then click back on the movie tab. I want the video (movie) to keep playing whilst looking at other tabs. I know it works for lots of websites eg youtube or netflix doesn’t stop when looking at other tabs - so why do the videos stop playing on wix? and how do I change this?
Ah, sorry. I didn’t realize you were talking about different tab .
So there isn’t a simple way to do it, but there may be a complicated way (only if the website is under your own domain). I doubt it’s worth the hassle (You may just prefer to create your own video box in an Embedded widget [iframe] instead which is much easier and less prone to bugs).
Anyway, if you do want keep using this video box and try the more complicated solution. See below (I haven’t tried it):
Add a custom element to the page.
In the custom element file use this script (of course not as is, you should adjust it to custom element) :
https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#example
But change it so it will always play on visibilityChange + in order to declare the video, use document.querySelector(‘video’) instead of getElementById (assuming you have a single video on the page).
Set the eventListener once the video starts playing (pass the value via costomElement.setAttribute) and remove the eventListener once it pauses,
P.S. I can’t guaranty it will work. If you need this feature I really think you should go for the embedded widget solution.