Forum Academy Marketplace Showcase Pricing Features

How to Pause Video.js Element when Element Isn't Visible

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:

  1. a cell title
  2. 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.

Here’s a demonstration / example:

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?

Hi there, it’s quite easy. You just need to type the expression on any element on the design tab, then copy the expression.

Once you have done that, go the the workflow tab select the event “do when a condition is true”. Now paste the expression on that dialogue/workflow.

then trigger the workflow to pause the video.

Hope this helps.

@bubbablaise3, thanks for the reply.

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:
image

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?

Thanks again!

@bubbablaise3 see if this thread will help you.

@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.

it’s a plugin.

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.

This is the html element that you need for that to work. This is the element that @pork1977gm was referring to on the other thread.

Yes, thank you. I just need to try to make sense of what it says / does now as I think I’ll need to make some edits.

Looks like first script loads the library.

Second script has me confused. I don’t know what the scroll or each lines do.

I think the in-viewport line can be simplified to remove the if statement since I don’t want auto-play.

I also think I might need to reverse look at the documentation to find the opposite of in-viewport because I want not in viewport.

If you understand what those lines are doing and can explain them in plain english, please let me know. It will save me some time fumbling around.

Thanks again!

Hi @tjc4

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…

document.getElementById("yourDynamicElementId'').pause();

@pork1977gm, thanks for the reply!

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.

Then I added a workflow to be triggered when that parent RG isn’t visible.

image

Then I added a run javascript action to pause the video.js element referenced by element ID.

image

As mentioned, video still plays when the parent RG is hidden. Any idea where I went wrong?

Thanks again!

Hi, sorry for the delay in getting back to you.

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.

Try this trick, it should pause them all.

var vids = document.querySelectorAll(’[id^=videoElement_][aria-label=“Video Player”]’);

for (var i = 0; i < vids.length; i++) {
new Function(“videojs.players.” + vids[i].id + “.pause();”)()
}

@pork1977gm, thanks for the suggestion!

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:
image

I tried with the asynchronous box checked and unchecked and I used the same trigger as before:

image

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.

Ok, so I removed the ID Attribute from my video.js element. That field is now blank.

I also changed the run javascript action so it’s exactly as you typed it.

Still not pausing when RG isn’t visible.

Yes, I’m using this free Video.js plugin

Will DM you momentarily regarding your offer to take a look.

Hey!
Did you find a solution for this?