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

Just have to circle back here to commend @pork1977gm for your great work on this plugin, man. Please don’t stop supporting it. I had to put my app project on pause for a few months but your support for MUX is a game changer and will be super handy once I pivot back to development this month. Thank you again!

1 Like

Nice comment there thank you! I won’t stop supporting it don’t worry :grinning:
I can’t tell you how many hours/days/weeks I’ve put into this trying to get everything right and to try and support everyone’s needs and I’ve had other developers help me out along the way so all is good. Most of the updates are all complete now and I know I’ve given MUX a few more customers too! I think we now have some support from them too now (welcome @jsmith_mux) which I’m sure will help when needed. Thanks again @ts11

1 Like

Hi there, @pork1977gm! That’s great to hear. Quick question: I’m a non-dev building an app that will rely on live-streaming and on-demand video content. I see your plugin offers support for Mux’s live-streaming service, in addition to storing and serving on-demand content. I’d previously planned to rely on Daily.co to record live streams and then upload them to Mux. That said, this is a fairly expensive setup and your instructions for setting up an Azure app look pretty straightforward. Could you offer any insight into the pro’s and con’s of each of these approaches for someone like me?

We’ll I’m not really sure, I mean MUX services I’m a great fan of and things are relatively simple to setup through them, more so now with this plug-in but for live streaming you can’t send any requests directly from the browser to MUX live streaming endpoints because live streaming uses a protocol that all browsers don’t natively support. So I’m happy to help you set this up through Azure. Azure isn’t expensive for what you need here and if you ever need the scale it up or add more processing power to the app service then it’s easily done.

1 Like

Thanks so much. I’ll have to consider that more thoroughly. One more question: Do you have any insight into the performance implications of having a lot of folks tuning into a livestream that is hosted on a Bubble page? Should I have concerns about scalability on that end?

With regards to users recording, it should be fine since it will be each client (user’s browser) doing most the work with regards to sending the data. All the server does is receive the data in chunks then and pass on to MUX in a different format so it’s not under any load from what I could see (but then again I haven’t tested it with loads of users but I suspect it will be fine).

For users tuning into a single live stream, I can’t see any problems with that since data is being constantly received by the browser in segmants (ts files I think) which MUX continuously send for any live streaming.

From my limited knowledge of how it all works technically I can’t see an issue but maybe MUX can give a better idea on how many users they could expect to tune into a single live streaming service? @jsmith_mux might be able to offer some assistance here.

1 Like

Thanks so much! @jsmith_mux, would be grateful for any additional insight you might be able to offer :pray:

I noticed there was an M4V type of file that was uploaded to the demo site. That format is now supported and plays.

MUX demo page got an overhaul today!

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

For anyone using MUX, there’s a new server side action included to bring up the scrubbing thumbnails on the player for which MUX provide. The action retrieves the requires details which you can then save into your DB and feed back into the player’s options (new fields added in there for these).

On MUX’s end, this feature is called a “Storyboard” and it’s basically a set of generated images that can be used to display the preview scrubbing thumbnails. This action only works with MUX videos.

The action works like so…
You need to pass it the playback ID for a given asset. This typically comes back in the webhook so you can access it from there in your backend workflow.

When the action has run, you’ll get the following data returned.

image

Save each one of these into your database. You don’t need the duration value although it’s there if needed. JSON field has since been renamed to URL. It’s not JSON.

When you now look at the player’s element options, you’ll notice there’s a new section in there which looks like this

Use the saved details in each of those 5 additional fields. When you play a MUX video you’ll see the preview thumbnails appear as you scrub the player.

Animation

Regards

1 Like

That’s incredible! This plugin just keeps getting more powerful. Quick question: Would you ever consider adding support to Daily.co for this? I know a lot of no-coders might be intimidated by setting up their own video server (even if its simple). Daily has a lot of traction in the no-code space. If one could host a livestream via Daily, fetch the recording and then pass it on to Mux all in one plugin, I think the total market for this would be even larger.

1 Like

Hi TS! Would love to learn more about what you need. I should have live streaming up in the daily video chat plugin within the next few days. Are you looking at the mux + videojs plugin for the playback features?

2 Likes

@lola keep me posted on progress! nice addition here, do you know how the live streaming works? as in the process behind where the data goes from the client to the rtmp endpoint

@ts11 I’m happy to add in some daily stuff but it looks like @lola has it all covered! :slight_smile:
and nicely done too

Depending on what daily video chat does, it might be possible to send data directly to them (or onto mux) through the videoJS recorder element, would have to figure out how they work first. My guess is that the video data through lola’s plugin is going directly to them through their API endpoints then they do the rest - much better solution if you ask me!

2 Likes

Thanks for the shoutout. This is great to hear! I’ve been planning to use @pork1977gm’s awesome plugin for playback, yes, and had been considering setting up my own video server to manage the live streams. That said, I love how simple Daily is, and they are offering a $1,000 startup credit right now, so had considered outsourcing the livestream bit to them. The one hiccup is that I’d need to be able to capture the final recording and pass it on to Mux for storage and playback.

I plan to do a little work on the uploader so it can accept a list of files as an input. I’ll keep you updated on it.

1 Like

Awesome Plugin… just subscribed. Few things I am struggling with…

  1. How can I minimize the # of control elements on the JSVideo player? (My bottom bar is kinda crowded… really just want a play button, full screen, and volume.)
  2. Is there any action that can be done on pause? (I’d like to display the poster image on pause)
  3. Is there a way to have the video reset back to the begginnig (and poster image) when the user scrolls away? Also when the video ends… can it reset back to poster?
  4. How can I change the poster image ratio? I’d like it to fit/stretch to screen if possible.
  5. Mobile Issue: The volume button seems to not work on mobile and jump around.

*I am using Vimeo links with the VideoJS Controls and City Theme. (Any issues I should be aware of using Vimeo links in the player as opposed to the Vimeo player? The Vimeo Player is not any design control or customization.)
*I am using smaller videos on a horizontal scroll. On mobile it takes up 2/3 width of screen.

Hi @NoCodeNinja

Thanks. So all those can be done, I shall reply back to you tomorrow if ok with some instructions for you, since it’s getting late in the evening here.

1 Like

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!