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

Hi @mlewis2016

Do you want to throw me over a few screenshots showing what you’ve done and I’ll tell you what’s wrong. I should probably create a video on how to do this, it would be beneficial to everyone I guess.

I’m away at the moment but back some time tomorrow. If it’s easier, I can just hop on a quick call with you.

Paul

In my computer I have a folder that contain the m3u8 and ts files of a video, can I upload those files to bubble database and run the video from there?

Thanks Paul, i’ve done it now :slight_smile:

1 Like

Yep that will work.

The files consist of:

  1. a main .m3u8 file.
  2. many .m3u8 files for each level of quality (let’s say 3 files).
  3. many .ts files.

So there is at least 7 files for 3 levels of quality.

In the property window of the plugin element there is a field for supplying those files and other field for labels, and the labels documentation says that these labels should match the files.

  1. If there is at least 7 files for 3 levels of quality how the labels should be ordered?
  2. I assume that the main .m3u8 file should be the first file?
  3. the plugin will detect .m3u8 quality files?

So the only one you need to load is the main.m3u8 file because the contents of the rest are stored within it. That should be enough and the quality menu bar option should become available. If you can send me the URL to the main.m3u8 file, I can check it for you if you want.

Any possibility of adding sprite thumbnails to be loaded from an image? (not from Mux)

If it’s already there … apolologies I can’t find it :slight_smile:

eg videojs-sprite-thumbnails - npm

Hi Lindsay,

Can you try using the action “VideoJS - Create Spritesheet” which will attempt to create the spritesheet using the video file you pass to it. It sometimes doesn’t work, it all depends on your video file format but if successful, it should return an image (plus a few other bits of data) which you can then use in the options below.

1 Like

Thank you - I found the scrubber is a much better preview mechanism. I am learning a lot about about video quickly :slight_smile: and there is a lot to learn :rofl:

Oh yes, LOADS to learn!! You’ll be an expert soon! Glad you got a solution anyway :slight_smile:

Tap to play doesnt seem to work on mobile safari.

If I tap around the RG cell a bunch of times, it starts playing and then I can access the controls, but I cant get it to play straight away on safari.

Ahh it might be something to do Apple’s user interactions rules. In whatever workflow you have on ‘tap’ if you throw in a run JavaScript action and just put : alert(“hellooo!!”)

See if that shows a popup on first tap. It’s just an easy way to know for sure if the workflow is actually running.

There is actually no workflow on tap, we were just using the basic controls from the player, but these aren’t immediately visible on load in safari, on desktop, not a problem, one click and it starts playing, but on mobile, one tap doesnt have the same effect. We’ve added the show large play button when page width is less than 768, but it looks a bit ugly. No dramas for now, will come back and design a better system for play/pause etc on mobile later.

Hi, I’m brand new to the plugin. I have the plugin setup and working with MUX to start a live stream.
However, I’m at a loss when it comes to my assets. I’m trying to save the live stream video, or at least get a link to it so at the end of the live stream, I will have a repeating group with all the prior live meetings.

Workflow, on button click, Start Live Stream
Workflow on button click End Live Stream
How do I get the URL and asset ID for the now-ended live stream back into my bubble app? so the attendees can have access to watch it?

I have a table called Videos that I would love to drop the video details from mux of all previous live streams.

Hi @lightedcandle2018

Did you setup the webhook?

I haven’t. Please give me a guide how to do it.

I was under the impression that your plugin would do everything in mux once I enter the environment key.

I was hoping for something in the plugin that can save the current live stream asset so when the stream has ended I have the ID needed to fetch the asset .

Mux says a new video asset is created at the time I go live even if I’m using the same stream id but your plugin doest give me the opportunity to capture the new asset I’d, it does for the live stream I’d but not the new asset I’d.

Can I just press abuttton and start live streaming and get the video asset info the same time using your plugin?
Or at the time I end live stream?well, webhook or plugin either way I need your guide getting this done.
Thx

Hi @lightedcandle2018

So the webhook is needed because once the live stream has ended, MUX needs the time to process it and complete the asset. Once that process is finished, they can send the data back to your Bubble app and then you can capture it in the backend workflow to retrieve the completed URL.

I’ll write something up for you a bit later to show you how you get the backend workflow/webhook setup. If you visit this demo page below, there’s an icon there in the middle of the page that will allow you to send the initial JSON request back to a backend workflow so it gets initialized. You’ll need to set the webhook up in MUX though so they know where to send the data to.

https://bubble.io/page?type=page&name=mux_upload&id=paul-testing-4&tab=tabs-1

image

This whole post is rather large now but if you do a search on “webhook” you should be able to get enough posts to hopefully get it setup :slight_smile:

Paul

Thanks for your quick reply. To my understanding however Mux instantly creates a video asset ID when the lifestream is started, it doesn’t depend on the video to be completed and processed the ID is just the ID that’s all I need. Are you able to pull that in the plug-in

Hi @pork1977gm , hope you’re well! Wanted to check, now that Mux offers 4k, will you be adding this to the plugin at some stage? Would be really helpful :pray: Thanks a ton