[PLUGIN] - VideoJS Advanced + YouTube, Vimeo, Wistia, HLS, DASH, MUX, Pre-roll Ads (plus more)

Need help Plugins
266

Update changes work great!

COMMENT #1
I’ve noticed an issue when using the ‘city’ theme
This doesn’t seem to apply to the other themes.

If the mouse approaches the progress bar from the bottom it seems to ‘hold on to’ the focus of the element below. The result is that when you click on the bar to scrub to the position in the video it results in a missed click. When you are trying to go to the end it causes the player to go into full screen.

Its quite subtle (only a few pixels), but they are an important few pixels :slight_smile: I’ve already made mistakes and entering full screen by accident. See video

COMMENT #2
Is there an exposed state for a network error for the video? Perhaps I’m missing this, its a different condition than the video file not being available on page load. It throws up an error message inside the player and I’m wondering if this error condition could be exposed. Thanks

267

Thanks Jon, I’ll take a look at both those and get back to you shortly.

268

Hi @jon2

I’m having troubles replicating the behaviour your describing here, can I ask what OS you’re running on and the browser? Also, can you see if the problem happens on this page and let me know. Send me the URL to a page you’re seeing the problem on too.

https://paul-testing-4.bubbleapps.io/version-test?debug_mode=true

For the second comment, there’s not currently an exposed state for network error (or video load error) but you do have an event called “videoJSplayer has errored” that might catch video loading errors, I’ll have a play with it. There’s the Bubble error catching event also which may help. If neither of those do the trick, I’ll add an exposed state in which gets populated when a video fails to load for whatever reason (or a make that videoJSplayer has errored event trigger).

There is also an event called “when metadata is available” which fires when the video is ready to play.

image

269

Chrome on MacOS

I’ll play around with error conditions again and see if I can make it work.

270

Ok, keep us updated on it. Try that URL too and see if you see the same problem.
I want to try and replicate the problem my end then I can fix it.

I see the issue now with the controls, they’re a little too high and run right up to the progress bar so I’ll modify each one’s height.

image

They’re just overlapping the progress bar which is no good!

I have a custom City css theme file if anyone wants it. It just moves the progress bar up a little bit.

1 Like
271

Couple of updates…

The VideoJS controls option now has an additional bit of text added to the documentation part since when you use this, it also hides the big play button on first launch.

The control opacity setting of 0 never used to work, now when it’s set to 0, the control bar is removed instead so you no longer get the mouse over click icon still appear.

image

Couple of new API actions included specifically for getting MUX metric data from your videos but there’s a ton of info and I’m still sieving my way through it. I’ll create another demo page to show how that would look (next week’s job now).

image

@jon2
The ‘on error’ event does trigger when a media fails to load (for whatever reason).
The different MEDIA error types that you get are as follows:

0 string MEDIA_ERR_CUSTOM
1 string MEDIA_ERR_ABORTED
2 string MEDIA_ERR_NETWORK
3 string MEDIA_ERR_DECODE
4 string MEDIA_ERR_SRC_NOT_SUPPORTED
5 string MEDIA_ERR_ENCRYPTED

Each one of those has a custom description assigned to it. When the error event is triggered, you now get the description put into a new exposed state called Media error description.

These are the descriptions:

"You aborted the media playback": "You aborted the media playback",

"A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",

"The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",

"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",

"No compatible source was found for this media.": "No compatible source was found for this media.",

"The media is encrypted and we do not have the keys to decrypt it.": "The media is encrypted and we do not have the keys to decrypt it."

Have a good weekend all!

2 Likes
273

Great update!
Can we get an option to silence errors that are displayed inside the player? For my use-case it is redundant to show errors in both places and a little confusing to the user. Thanks for taking the time to make these improvements thus far on my behalf.

Also

I don’t see these error state strings exposed anywhere? I do see the aforementioned error descriptions in Media error though

274

Sure I’ll take a look at hiding the errors from the console next week (tomorrow) as out all day today.

With regards to the state, I only populated it with the error message descriptions as figured that would probably be enough but we can change that. How do you want it to work exactly? Do you want these MEDIA error strings also exposed? In the same state before the text? Or in a new one? We could have 3 states : Media error code, Media error type and Media error description if you wanted? So all three would be populated when an error occurs. Or you can have all three concatenated into one state like:

“4 - MEDIA_ERR_SRC_NOT_SUPPORTED - No compatible source was found for this media.”: “No compatible source was found for this media.”

275

I have no expectations of how it ought to work :slight_smile: . I wasn’t sure if I was missing something and that these strings were supposed to be exposed somewhere. My reasoning behind asking for this is that I figure if I’m checking for a certain error condition that evaluating a string like MEDIA_ERR_SRC_NOT_SUPPORTED would be more likely to be consistent over time, whereas with the error description may be likely to evolve and change over time and therefore less reliable to use to check for an error condition. As long as the formatting and content of the error message remains consistent and predictable, then concatenating everything would be ok too.

Thanks

276

I’ve added a field option to disable any loading console errors like so.

image

And created the three states below which will always get populated on any loading errors etc.

  • Media error code
  • Media error type
  • Media error description

image

image

1 Like
277

Loving the plug-in.

Possible bug: Having issue with “play JS Player” workflow on IOS.

My settings are Vimeo Player = Yes. I have created my own play button overplayed on the player… once it is clicked I use the “Play JS Player” action in a workflow. It works on desktop and Android. Just not IOS.

278

Ok thanks for letting us know, I’ll take a look today.

1 Like
279

@NoCodeNinja

I’ve taken a look at this, did you mean the action called “Play videoJSplayer” ?
I can play a vimeo video using their player when assigning the play action to a button on iOS.
Maybe I can take a look through your editor to see what’s going on?

Does it still act in the same way if you move that play button so it’s no longer overlapping the video player? just as a test.

Send me a PM and we’ll figure it out. Send me the URL you have too and I’ll test it on my phone.

1 Like
280

Update v1.82.0
As requested, a couple of new options.

The Load subtitles action now features all possible styling options available for subtitle tracks.
The action looks like this, each option has a set of dropdown values.

image
image352×791 19.6 KB

image

And the background color of the video element can now be changed to any color or it can be made transparent. This might be useful depending on the aspect ratio in use as sometimes if the video’s height doesn’t quite fit the container proportionally to the width then you see the black lines at the top and bottom.

Before
image

After
image

And after again but made transparent
image

The option is here:

image

281

Hi @pork1977gm , regarding the thumbnails - the site I am building doesn’t need thumbnails for the purpose of scrubbing, it just needs a thumbnail that shows in place of the black screen in the player when the page is loaded before a user clicks the play button. Will there be anyway to generate this thumbnail once that action is deprecated?

Also is it possible to generate thumbnails for the video players within repeating groups? Currently the action is able to find video players within a page but not within my repeating groups on that page.

Thanks!

282

This may be a possible bug - for some reason the video player sometimes doesn’t work on mobile devices. I have set muted to “yes” and viewport autoplay to “yes”. The videos work on desktop but show black screen on mobile. The same issue is there with the thumbnails (works on desktop but shows black screen on mobile). This problem comes and goes, with the mobile videos working sometimes even with no changes made to the video player.

283

Hi @dhawan_30
Ok so it’s the poster image you need by the sounds of it. Are you using MUX? I can’t remember now, if you are then we can easily get poster images from any videos you have uploaded from using a URL to your stored asset. If you’re not then since that “Generate video thumbnails” action no longer works due to browser changes and that, I’ve still yet to find a reliable way of generating those posters/thumbnails for other video formats using Bubble. I will try to find an alternative way because I think that’s quite an important action to keep, I shall keep working on it. When I find a way then you’ll be able to view them all in a repeating group. I’ll try and keep you updated on any progress with this.

Regarding some videos not working on mobile, do you have a video URL I can play with? or I can test with? Or maybe a URL that you use to view your site on a mobile/desktop? If you do send it over (either here or PM) and I’ll see if I can replicate the problem. If I can see errors etc then I’ll know where to look and it will give us more of a clue as to what’s happening here. Create yourself a text element on your page and use the 3 Media error states I added the other week. That way you should hopefully see any errors which are produced on mobile too.

If you want to show us over a Google Meet or something, we can do that too.
Either way, I’ll do my best to try and resolve both of these problems you have here.

1 Like
284

Hey bro

I purchased your plugin a few months back but have been busy and had to put my project on hold. I may have asked you this before, so pardon me if you have already addressed this:

Can the videos be downloaded with the subtitles/captions burned into them?

285

Hey,

No probs. Unfortunately they can’t at the moment but I’ve spent a bit time with Bubble to work out if we can server actions using a piece of software that will be able merge videos, convert them and burn in subs etc. I’m not sure if it can be done using Bubble’s infrastructure at the moment but I’m trying to get something working.

Right now now, I’m afraid that can’t be done. If I can ever get it to do that I’ll be sure to let you know! Happyscribe or AssemblyAI might be able to do this type of thing if you send the video file and vtt file along in some sort of API request. Not sure, need to do a little more research on it.

286

Noted thank you. Hopefully you will figure it out eventually.