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

@pork1977gm purchased your plugin and am excited to get to building with it. I did have a quick question with which I was hoping you could help. I see that you support clipping for Mux uploads. Is there a tidy way of allowing users to select the start and end time for a clip using the video.js player?

Great! you’ll have some fun no doubt!

So I assume you’re talking about the API request to MUX which is called Clip asset (MUX) right?

That takes some dynamic input’s which you can feed into it. It will need an asset id, a start time and an end time and it basically clones an existing video you’ve already uploaded and creates a new one that is clipped from the specified start/end times.

Whatever process you give to users for uploading a video, you could perhaps have some options available in your site, give them the option to clip the video and just return the clipped one to them or something? or you could store the original one too in your DB somewhere. The clipping of videos like this essentially takes up more data in your MUX account so it has the potential of costing you a little more since you have 2 videos uploaded.

There may be other alternatives like manipulating the playback URL with parameters but I’d have to read through their docs to find out.

Introduction to Mux Video | Mux

1 Like

Thanks so much for the quick reply! Yes, I am looking at the Clip asset API request. I guess what I was wondering is whether it was possible to somehow use the scrubbing function on the player element to set the start and end time that would then be passed to that API request. I can play around with it and see, but thought you might be able to point me in the right direction. Essentially, I’m wanting to allow users to clip certain highlights from a livestream after it’s ended and save them as separate clips, if that makes sense.

I think that’s doable. You should be able to access the current time state which will change when the scrubbing is changed, then from there take that time and use it as either start or end parameters in the request. Not at my laptop right now but I’m sure with a couple of states thrown in it will be possible to make something like this.

1 Like

Hello,

I am having a lot of fun with this. I just ran into an issue and was hoping you might know the fix. If I record a video on a laptop and display in a repeating group, I can view it fine on my laptop but on my phone I get the ‘this media could not be loaded’ error.

Video recorded on the phone can be viewed on both phone and laptop.

Ok, so I’ll have to test that, I’m guessing you have an iPhone right?
Maybe you can just PM me the link to your site with the RG then I’ll just open it up on my phone and see if it works for me. If it doesn’t then I’ll try figuring out what’s going on there.

It’s a bit of a nothing burger as my users wont be uploading using a laptop anyway but I would like to make sure all mobile devices work. I’ll PM you now.

Sure understood, be good to fix that anyway

Update v1.91.0
More updates containing some extraction actions, some visual modifications to the sound wave and a bunch of general fixes and improvements.

@dev.admin @nanomid

  • Updated the recorder element documentation parts regarding iOS, codecs and video playback across devices. The coming iOS 15 update will have new features included which should hopefully enable playback from the recorder when initiated from other devices/web browsers.

  • The recorder background color can now be set and supports transparency which when audio only is selected and the sound wave appears, will allow you to have only the sound wave visible and you can overlay this on other elements.

  • New action called “Trigger permissions” that triggers the popups for camera and microphone in the browser. You can use this to enable permissions at will before any recording session is started.

  • The “Toggle sound wave” action has a new option which allows you to remove the background therefore making it transparent so it can be used as an overlay on top of a playing video or any other element. In addition to this, the video player has an option to allow the poster to stay visible at all times during playback as seen below in a playing video.

image

  • The recorder element can now take snapshots and save them as an image (PNG) stored in exposed state called “Snapshot”. There’s an Image option in the settings to enable this mode.

image

  • The recorder element has new actions to capture snapshot and retry a snapshot.

  • Both recorder and player elements now include a “Picture in picture” action where you can enable/disable this mode and an exposed boolean state.

  • A couple of extra server actions, Extract audio and Extract subtitles, these generate MP3 or VTT files from various streams within a media file.

  • There’s a “Load audio track” action which will load additional audio track streams into the player, but this uses the AudioTrack API and not many browsers have full support over this yet, but it’s here anyway.

  • VideoJS core code has been updated to the latest version (v 7.14.3)

  • Tools demo page updated - https://paul-testing-4.bubbleapps.io/tools?debug_mode=true


MUX

For anyone using (or thinking about) MUX streaming, they’ve just released a new “low latency” option which reduces latency to under 4 seconds thus allowing for much better interactive experiences. It’s actually a viable option now for video chats etc. This option is included in the “Create Live Stream (MUX)” API request.

Paul

1 Like

Update v1.92.0

Video color isn’t normally like this, it’s just a reduced set of colors to get the animated gifs small enough to use in this post!

  • Canvas zoom and rotation options… (in the player)
    Animation0

  • Camera zoom options (in the recorder)
    Animation1

Hello,

I think you have an amazing plugin.

Does your plugin have a workflow to take a snapshot from the player?

By the way, I am testing it right now. I just bought the subscription. :slight_smile:

Best regards,

Marcos M.

I was looking for something like this

Thanks @marcos

You can do that, you’ll find an action called Take snapshot

@pork1977gm

Sorry, do you mean the PLAYER or the RECORDER?

I can’t find one for the PLAYER, if you could point it out that would be awesome.

Another thing, there’s no video quality selector for VIMEO is not included because is not possible?

@pork1977gm

Only actions for Take Snapshot are available for the recorder not the player

Ah yes sorry about that, it’s in the recorder only at the moment, I’ll have a look at putting something similar into the player. I tried it sometime ago actually and run into issues with cross origin support but I’ll take another look at. The quality selector options are dependant on the type of video and whether it has multiple sources. Typically, the quality selector appears when you have an HLS video loaded, but if you’re trying to play a Vimeo video without having that the “Use Vimeo player” option checked, then you only get the highest quality version of the Vimeo video as an MP4 loaded into the player so I don’t think the quality selector icon will appear in the controls. You may need to check that option to get what you need there. If you want to send me the URL for the video you’re playing with, I’ll load it and see what’s going on in a bit more detail.

1 Like

Hi @pork1977gm

Have you got any working examples of mux live streaming in action. In particular the best practice for secure playback of live streams?

Also, how to generate a live viewers count?

Thanks

Hi @nfisher

Well, the recorder demo page has that in it, there’s a Live Stream image at the top just above the top right recorder element but it’s not working on iOS at the moment since I was in the middle of making some changes to the recorder camera’s options I’d trying to expose things like resolution, camera zoom, front/rear camera swaps etc.

You can use that page within a web browser though. There are secure streaming options (using json web tokens I believe) which I haven’t added in to the live streaming part yet but I will do that since that type of secure transport has already been adding into the file upload process.

Take a look at that page anyway, you’ll be able to start a streaming session off, record yourself and a few seconds later you’ll see your own stream through the player on the left.

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

I plan to do some more work on it next week so let us know what your requirements and that are and I’ll do my best to get it included.

Depending on what your after though, if you haven’t checked out.
I’ll see if MUX provide data easily for how many connections are established to a live stream, if not you could potentially do that through states/actions etc in Bubble.

Hello @pork1977gm,

Quick question: Do subtitles uploaded to Vimeo (vtt format) only work with the Vimeo player setting? I am trying it now, and it seems that VideoJS doesn’t seem to pull the subtitle from Vimeo.

Thank you for your help!

Hi, yep so I think if you want the subs for a Vimeo file to display you’ll need to use their player instead. If you’re not using their player then you can load the VTT file through the “Load subtitles” action. Hope that helps.