Forum Academy Marketplace Showcase Pricing Features

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

Here you go

  1. There’s an action called “Set VideoJS controls” which will allow you to modify the controls on the player. If you run this when the element is visible it should do what you want it to.

  2. You have an event which will trigger when a video is paused, it called “A videoJS player has been paused” and from there you’ll be ale to run any workflows. Hopefully that will help.

  3. To reset a video back to the beginning through an action, you can run either the “Play (with options)” action and set the start time option to 0, or you can run the “Restart” action which will do the same. Poster images can’t be set again once a video begins to play, well not at the moment anyway. I could add this functionality in if you need it although it might be easier for you to use an image element and place it on top of the player area maybe. Let me know about that. There’s also a couple of events that will tell you when the player goes in/out of page view (scrolled off the screen), these are called “A videoJS player is in viewport” and “A videoJS player is out viewport”.

  4. That can’t be changed, you can try changing the aspect ratio of the player and see how the poster fits (although I don’t think this will make a difference) or you can play with the Object-Fit option in the player’s option fields which may have an affect but if they don’t work it will be easier for you to use to place a Bubble image element over the player (make sure both are in a group, player and image) as you’ll have better control over how you want the image to display.

  5. I’ve not experienced this one! I only have an iPhone to play with but I haven’t received any major reports of issues. Have another go, maybe it was a one off :slight_smile:

Hope they help.

1 Like

They’ll be a new API request later today which will allow you to pass in a URL to a video stored elsewhere and it will be uploaded as a new asset into your MUX account, without the need for an upload URL.

1 Like

Incredible! :raised_hands:

Thanks for weighing in here! I can look into more details of how exactly the livestreaming gets passed but all that’s required is a rtmp url and stream key to stream it a video call to a platform like Mux, Twitch, youtube, etc.

I know when I tried it out with youtube the stream automatically saved, but can play a little bit with Mux!

Would love to see a solution where you can send video data directly to MUX @lola
If you ever manage to do that, let me know! I’m just waiting on a response back from bubble about some recent browser updates which may be interfered with a couple of actions then I’ll push the update and list the new features.

Hi @pork1977gm yes! It’s up and live in the plugin. Here’s a thread on how that works

@ts11 , @dhawan_30

Apologies for the delay with this, it’s now ready if still needed.

  • New API request - “Create asset (MUX)”
    allows you to simply send a media file to MUX but without the need for creating an upload URL first. It requires the file already be stored somewhere first, so you pass it the URL to the media file.

  • New server action called “VideoJS - Create new assets”
    similar to the first option but in the form of a server action where you can pass in a list of media URL's to upload as assets into MUX.


On a separate note, and just for info…

There’s an action called “Generate video thumbnails” that in future releases will be deprecated due to it’s usage around ffmpeg. Recent browser updates combined with Bubble’s support for cross-origin policies now render ffmpeg useless since it relies on the SharedArrayBuffer object to work.

Paul

1 Like

I’m wondering if this is a way to autohide the slider and the mouse cursor when the video is playing and the mouse isn’t moving when the element is inline. This is the default behavior for the standard HTML5 video element in chrome as well as the youtube player for example.

great plugin btw

Hi @jon2

Thanks, I’ll check that today. There will be a way to make that happen.

Hey @jon2

Can you just check the demo site (https://paul-testing-4.bubbleapps.io/web_videos?debug_mode=true) and make sure it acts how you want it to? If it now works how you want it to then I’ll push the change.

I’ve tied it into the opacity option in the top right corner of that page.
Loving that skiiing video whoever put that up, reminds me of when I used to go!

image

Hi

Is it possible to know how long each user has watched a live streaming video? Does it consume a lot of workflows ?

Good question, I’m not too sure. It doesn’t consume a lot of workflows or anything but I suppose it all depends on what your definition is on “watching a video” - we can probably work something out. So a live stream has to be played in the player and the player gives you a number of states like current playtime etc and events that trigger when videos are played/paused. I could create a state that would update seconds as a video is playing and pause the count when the video is not or something. Will have to think about the best way to measure that. Might be possible to do in Bubble and the current states also. I think MUX may have some metrics also. I’ll take a look.

So with regards to using MUX, it looks like you can get this type of information using the metrics section. I’ve not yet fully explored all that is possible or added in all the capabilities that are available. I would imagine there is a number of API requests available where you can pull back all sorts of data about videos. Not sure if this is a little too much for your needs but if you’re interested, then this option here in the settings…

image

When it’s set to Yes, all sorts of data is sent to MUX about a playing video. You can see that data here…

To get that data back into the plugin I’d have to add in the API requests to get at it (which I don’t mind doing at all) - If that’s a little too much, I may be able to find a simpler way to get the played/watched time of a video.

1 Like

Auto hide control bar
Works on the demo page, but I’m missing the circled option on my plugin. This is what I see on . Im running 1.77.0

Not sure this option disappeared or wasn’t ever published

Auto hide mouse
This doesn’t work on the demo page. Maybe requestPointerLock() or some CSS would do the trick alongside the controlbar autohide?

Ok, I not pushed the update yet hence why you can’t see it. I forgot about the option with the disappearing mouse, I’ll add that now.

nice. many video players are missing this so thats a great addition

Thanks so much for your answer.

This way would I have this metric per user? If so it would be great for us and I believe for all aps related to online events, trainning, HR etc…(it is critical to know user attention KPI)

Yeh I never thought about doing it actually so thanks for the tip. Try the demo page again, I don’t think I missed anything. The mouse will become hidden when you’re hovered over the player.

No probs. So it would be ‘metrics per video’ but if you had specific videos assigned to users somehow then it could be. I think in those mettric you can see things such like how many people have viewed it, played it, who watched all of it, who didn’t etc etc…
I think MUX have probably thought about all those type of things. I shall look at adding the relevant API’s in for you and put something together on a demo page to show how it works over the next couple of days.

The demo page has a long list of videos so it would be nice to see the metrics on those!

Looks great. Can we get a plugin rev so I can incorporate this into my app? :slight_smile: