I’ve got a single page app. One pseudeo-page in the SPA has a repeating group. Each repeating group cell has amongst other things:
a cell title
a video.js element
Clicking on the cell’s title hides the repeating group pseduo-page and shows the cell detail pseduo-page.
The problem I’m running into is that if a video is playing in the repeating group when the cell title is clicked, the repeating group video continues to play even though the repeating group and the video’s associated controls are hidden.
So user hears the audio from a video they cannot see or control.
I was hoping a simple conditional would solve this but while I can get right conditional trigger (i.e. when element isn’t visible) there isn’t a corresponding pause action.
I’m thinking a low-code HTML solution might be possible. E.g. when the element is hidden, assign an ID Attribute and some HTML that pauses video with that attribute but I’m truly a no-coder when it comes to HTML.
Does anyone know how to pause the video when the element is hidden? Whether no-code or low code?
When I try to paste the copied expression into the “do when a condition is true” workflow the expression changes from “This video.js isn’t visible” to “this page isn’t visible”.
I’ve tried manually creating the expression (rather than copying and pasting) but that hasn’t been fruitful either.
I have six video.js elements on this page as shown in the screenshot below:
However only the four that are not contained in repeating groups appear when I try to create the expression in the workflow:
So I changed the condition from the video.js element to it’s parent repeating group. That allowed me to set the visibility condition but, as shown in screenshot below, I still can’t see the video.js elements in RGs so I can’t pause those elements.
Any suggestions as to how I can control these elements that are in RGs?
Or create a more global solution (e.g. anytime any video.js element isn’t visible it’s paused) so that I don’t need to have workflow for each video.js element?
@gaffneyantonio, thanks for pointing me to this thread. I tried looking at the editor there for the ‘isInViewport.js’ which would seem to do what I want to do but I can’t find it in the editor’s elements or workflows.
Do you know where it is? I’d love to see how it’s implemented because I’m not sure how to do it on my own.
Thanks for sharing but I’m not sure this plugin will achieve my desired goals. It seems there’s a viewport_detect element that can trigger a workflow whenever the viewport_detect element is detected (visible).
I need the opposite - a trigger when the element is not detected. Perhaps the plugin has that functionality and I’m just missing it.
I’ve posted on the Zeroquode forum asking if their plugin can do this. Will update when I get a reply from them.
I’m extremely close to releasing an advanced version of the videoJS plugin. It will give you the functionality where you can trigger events if either a video comes into the viewport (scrolled onto the page) or you can also trigger an event when a video goes out of the viewport (scrolled off the page) but it’s not quite ready at the moment.
It has a heap of other controls in it too and will be able to play all HTML5 video, YouTube videos, Vimeo videos, dash, HLS and lots more all in the same player. I’ll release that as soon as I can.
To go back to your issue though, when you click on your video’s cell title, whatever workflow you have running upon that click, can you not just add a “pause video” action in there before hiding your repeating group pseduo page? I assume you’ve tried that but thought I’d ask anyway.
The other thing you could do is attach an element ID to the video element inside the RG, it would be in the format of "my videoElement " + current cell’s index which keeps each one unique and then have a Run javascript action when the RG become not visible and run this…
Looking forward to the release of your plugin. Any idea how soon is soon? Days? Weeks? Months? Let me know if you need guinea pigs…
I had not previously considered the pause on click idea. In theory that could work but in practice would be kinda clunky. In addition to this video.js element there are two other pseudo-pages with video.js elements. And between clickable elements unique to pseudo-pages and common clickable elements in the shared header and footer navigation I’d have to add pause workflow actions in a lot of places. So it could work but I like to keep my workflows streamlined.
The element ID idea sounds like my ideal solution. I tried implementing it but seems I’ve messed something up (video continues to play). Here’s what I did:
I added an ID Attribute to the one of my video.js elements.
Note: I did not add cell ID to the ID attribute. Didn’t seem necessary as all cells will be visible or all cells will be hidden based on the parent RG’s visibility and I didn’t see a specific cell reference in your javascript and didn’t know how to add the cell reference to the javascript.
Hopefully it will be days because I submitted it this morning, as long as Bubble don’t find anything wrong with it that is.
If you open up the console and type videojs.players;
Does it return some sort of element collection?
I can see this in my tests but I can’t find a way of looping through each one and sending a pause(); command.
Maybe someone else reading this will know.
In essence you can do: videojs.players.videoElement_65746.pause();
And that will pause your video, but you need to find out what your videos element ID is first. If you could loop through each one and send the pause command then they’d all stop. Problem is, trying to do this outside of the plugin is a little tricky since all those element names are created during the Initialize phase of the plugin.
I’m sure someone will know though!
I’ll keep playing with it anyway. I realised by adding an element ID to the plugins visual element won’t work in this scenario.
I tried replaced the previous javascript snippet you provided with the updated one (and changed id^=videoElement_ to id^=VideoElementProgress to match my element’s ID Attribute).
Resulting action:
I tried with the asynchronous box checked and unchecked and I used the same trigger as before:
Videos did not pause when the RG was not visible.
If you have other ideas, let me know.
That said, it sounds like your plugin will make what I’m trying to accomplish easy, I like easy, this isn’t a super urgent bug for me to fix, and it sounds like the plugin will be available soon so I’m happy to wait a bit for the plugin.
It will do for sure, I’ve already implemented these features as we’ve been discussing so I hope they will come in handy. Get rid of your elementId of “VideoElementPro” because it won’t work with that since inside the VideoJS plugin you are using, it creates it’s own div (I checked the code)
Instead, keep it how I had it, so take it back to use “videoElement_” because when you add your visual elements onto the page, that’s what they all start with. You should see that when you click on the element with the console open. Just to check, it is the free version of the VideoJS plugin you’re using right?
Also, if you’re happy to change the permissions on your app I don’t mind jumping in and taking a look.
