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

ok I will get to this in next couple few days. @pork1977gm

Ok, I will have a play with it myself as soon as I get the chance to. There is a state called “sound_wave_generating” which may prove useful for testing. Make sure it’s not stuck on Yes. Also have a read through these comments because others might have had similar issues. Speak soon.

Issues

@pork1977gm

How did you get on with connecting the JS recorder so that we can upload the video directly to MUX without having to save it to S3 first?

Afraid I didn’t get the time to look into that, I’ve been quite busy with my normal jobs and this task ideally requires an open web socket connection to do it properly. The other way would be to store the entire file/blob data in browser memory then turn it into a file to upload, something which may cause issues depending on the length of video recorded since the longer it is, the larger the file. If this is something you definitely need, you could replace the recorder with the Pipe player (https://addpipe.com/) then use a webhook to notify your bubble app when the recording is ready. Within a backend workflow you’d get the mp4 URL and upload it directly to MUX that way.

I’ve just had a quick play with this:
Upload files directly | Mux

And I’ve managed to get the blob data straight out the recorder directly to MUX but they’re not processing it for some reason. I suspect something more needs to happen to file data before it can be uploaded because I just keep getting this…

They’re all throwing an error which is either “The input file was not a valid video or audio file” or “The input file did not have a duration or was too short. The minimum supported duration is 500ms”. I can’t quite figure it out :frowning:

The latest version does output the recorded data into a global variable accessible through the browser as “window.recordedData” - this could potentially be used to further manipulate. I may come back to this at some point.

@mitchbaylis

I’ve just managed to do it. I’ll get an update pushed shortly with instructions once I’ve fully tested it.

Paul

1 Like

Upload Recordings From Recorder Directly to MUX

~v.225.0~

FYI @mitchbaylis, @cmarchan (mobile recordings will go straight to MUX if you enable this and never save in S3) - you’ll want a webhook in place to get the recording URL’s back into your app though.

You can now upload recordings directly from the recorder straight into MUX so no further actions need to run to do it.

In the recorder is an option at the top which requires you to put in an upload URL like so…

In the example above, I’ve used the request itself to create the upload URL but you may want to use a state if you’re planning to do multiple recordings. Once an upload has completed, the event “uploaded to mux has completed” will trigger and you could re-create a new upload URL inside that if needed. If an upload fails for whatever reason, then the “uploaded to mux has failed” event triggers instead.

image

Hope this helps
Paul

Hey there, great plugin, thank you!

I’ve been getting these errors on my side… any ideas?

Seems like “cover” is not producing the expected format for me. Video is still letterboxed rather than filling the viewport and getting clipped. Do I need to set an aspect ratio or leave it blank?

Hi @fernando2

Thanks for pointing out the error, it looks like that section was trying to get used before is was ready. I’m normally careful with things like that but check for the latest update now and then try it. Hopefully that error is now gone but let me know if it’s not.

The display question, all I can really say is try all that you’ve mentioned. That image looks like it’s from a mobile and it is possible (depending on the browser) the behaviour can be different. Try the aspect ratio options, I think if you leave it blank and your page is on the newer responsive engine, the video’s height is set to 0 so nothing appears, I should probably look at that. Set it to 4:3 for the time being. I’m sure what you need, can be done, just need to play around with both the video settings and Bubble’s layout settings.

Thank you. But I am still getting the errors on the debugger after upgrading.

As for the Cover mode, what I noticed it that it will work with uploaded videos, but not with YouTube videos for some reason… thats the only difference. Is there anything on the Youtube player that might be limiting this?

PS: I’m using Responsive Viewer Extension for some of the tests (but also two actual mobile devices).

Highly recommend :wink: : Responsive Viewer - Chrome Web Store

you’re a legend, thank you :slight_smile:

1 Like

Mmm ok…

The YouTube player isn’t great with videoJS, mainly because it’s just old code and not really maintained by myself or anyone else, but I’ll try and find some time to look at it for you.

1 Like

Thank you @pork1977gm, the plugin is really great. :wink:

Unfortunately I’ve found another issue with YouTube. I’m using an action to play a video from within a RG and it doesn’t seem to respect the Muted or Volume parameters. I assume this is why the video will not load on an actual mobile device.


image

@fernando2 upgrade and try again. The volume and muted controls should be working correctly inside an RG now. Regarding that other error, I can’t seem to replicate it, perhaps if you can PM me a bunch of screenshots from your editor or even better the link to your editor and I can jump in and figure it out. It’s got something to do with the timing of when the player is loading. If I can see how you have things set up, then I’ll understand what’s going on a little better.

1 Like

Thank you @pork1977gm. While this did appear to fix the muted issue, unfortunaly the issue persists on actual mobile device (both IOS and Android).

I’ll DM you the editor link so you can test it out. Thanks again!

I’ll get back to you as soon as I can with this @fernando2
Will try not to keep you long

1 Like

Hi

I’ve been looking at your site this morning, playing around etc and I’ve taken all the settings that you have and put them into my own test page to try and replicate this muted behaviour on mobile. I can’t seem to get it to not work though. For me, when I try putting the player into a RG on a new test page and then to view it on the iPhone, that mute option is behaving itself but when I browse your site on my iPhone, I can clearly see it’s not muting the videos which is a little strange.

Take a look at this page, there’s not much to it other than a single RG with a few youtube videos.
Paul-testing-4 | Bubble Editor

I’m wondering if some of the other video players you have in the plugin section are somehow interferring with the controls. A quick test would just be to simply uninstall them then try the page again. If it makes no difference, then just undo a few times and they should come back.

YouTube and VideoJS don’t really get along too well, I mean they work and that but I’ve certainly had issues with it in the past. That emoji issue I’ve not seen that before either.

You could branch this version and give us access to your editor then I can play with the branched version and try and make it work for you.

1 Like

Awesome Paul, thank you for putting in time on this!

So I did a few experiments and indeed there seemed to be something interefering (couldn’t nail what exactly unfotuntaley). But I removed other players both from the plugins list as well as from the page and it does seem to behave as expected in terms of mute and autoplay. Even the Viewport on Autoplay is now working (I forgot to mention it wasn’t before).

I created a striped down version (similar to yours) here so its easier to check and test out some more YouTube settings.

There are still a few issues that I am noticing:

  • Object-fit “Cover” option still won’t work (video seems to always default to “Contain”). I understand that might be a YouTube thing, but its the only thing preventing a TikTok like experience now :wink:
  • Unmuting the video by using Youtubes’ controls, does not change the Muted state of the player. (see link above)
  • The Fullscreen workflow action doesn’t seem to respond as well (I’m assuming a limitation?).
  • Now the weirdest thing is happening… while experimenting on the above link, I created a workflow with “VideoJS Player Has Started” or “VideoJS Player is Ready” to set YouTube Controls (not sure this is the best way as I was trying to hide the built in Youtube controls to favor my own UI within a RG).
    What is happening is that when I click to play a video, the video automatically goes to full screen! (something I was looking to do from my own UI). I have no idea why just setting some YouTube Constrols is triggering Fullscreen on click…

Mind you this is on an actual Iphone, not a simulator. :wink:

Thanks again

Hello dear @pork1977gm Hope you are doing Fantastic! I have an issue with Safari on desktop iMac and on mobile iPhone as well… I can not upload video just on debug mode when I set the step-by-step so I click through the steps:) I tested here.: https://paul-testing-4.bubbleapps.io/mux_upload?debug_mode=true so hope i can understand my issue but doing the same when I use the one button options no upload just in the debug step-by-step mode. So can you give me some nice solution for it? To work only with one button not just in the debug mode?
Warm regards
Janos