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

Mmm ok, how do you load the video once the conversion has happened? It should work when using the conditionals tab dynamically and when you use the load media file action. If not using the load media file action, maybe that be run inside an event of some kind?

Need to see the setup really, to better understand it.

@pork1977gm Once a user has uploaded the file, I have the a “New media” record created:

The player is currently loading the most recent media record, so in theory once it’s created it’s immediately showing and trying to play that record.

However, in Uploadcare below is the status during the conversion - which is where the issue is coming. It’s loading the UUID of the record correctly, it’s just not completed by the time the VideoJS player is trying to play it.

Screen Shot 2022-11-16 at 3.11.32 PM

Does this help?

@pork1977gm

Okay so I was able to figure out a way to resolve it:

Steps taken for those who have issues like this using Uploadcare:
Step 1 - Upload File and pull API “Get File” of the UUID

Step 2 - Create a new record with the URL from

Step 3: Convert Video only if it’s type is “video”

Step 4: Set states for the converted video UUID & the New Media record unique id created

Step 5: Create a new action item that run every 5 seconds only when the converted-video-ID is not empty.

Step 6: Using Uploadcare’s API - Get File Request pull the UUID record of the converted video

Step 7: Make changes to the Media record you created only when “is_ready” is “yes”. This part is critical, as this allows the step to repeat when it’s not ready yet.

Step 8: I reset all the states back to empty only when the Media record’s file is not empty.

The result of this will only show Video’s in the VideoJS Player that have a Mux_url, and when the Mux_url is finally added to the record, it will update the player and won’t have any issues.

Hope this helps anyone who runs into an “Instagram” type platform.

1 Like

Nice work @nathan12

Hi @pork1977gm. Any way to manually start a video’s buffering? Reason I ask is that buffering the next video in a RG would make the user’s experience smoother (currently loading/buffering only starts when player is in view it seems?)

Good idea, although I don’t know the answer to it!
I suppose the “preload” option being set to auto may help but other than that, I’d have to have a read up.

This could work…

How to preload an entire html5 video before play, SOLVED | dinbror

Also, remember that the autoplay attribute has precedence over preload, meaning if autoplay is set to Yes, preload = auto wont work.

Awesome. Thanks. I’ll give it a try. :wink:

What an awesome thread … totally incredible plugin and the support looks unmatched.

I’m (was) working with dynamic ai generated speech and 3d animation/metahumans with viseme lipsync tech and I have not found a video player that can mute/play the existing video and stream a separate (dynamically generated) audio stream … until now.

With the VideoJS plugin I can use 2x players, 1x audio, 1x video (muted) and play BOTH once both have loaded so the audio is in-sync with the 2nd video player … and with the ability to trigger workflows as timed “events” opens the possibility for deep user interaction, engagement and an emotional connection with digital human/character(s).

MASSIVE UPs To The Plugin Author Pork1977gm For Some Incredible Work.
Will copy & paste as a review mate, thank you for your work and effort!

I do have one quick question;

Is it possible to have a “stored” (transparent PNG) image overlay “branding/template”, that gets encoded into the user uploaded image/video before the url gets passed back?

If so, what’s the best/cost effective encoding platform/service do you recommend using for this process? Is it MUX or is there something similar?

Appreciate any recommendations, thank you in advance!

1 Like

That’s one of the nicest reviews I’ve had @bigboyz, thanks very much for that, much appreciated.

To give some context about image overlays, I don’t think it’s easy to do this in the browser, but if you’re already using MUX then they can do this, although I haven’t exposed the functionality yet to make it possible, I can certainly do that if you wanted. It looks like this feature is only supported for videos though.

https://docs.mux.com/guides/video/add-watermarks-to-your-videos

To transpose an image over a video, means the video has to be re-encoded in some way or other. I do have a number of CloudConvert actions included, one of which allows you to run a custom FFMPEG command. I’ve just modified that action and pushed another update, so if you wanted to use it then you can do.

First off, the FFMPEG command for this is:
-filter_complex "overlay=W-w-5:H-h-5" /output/myVideo.mp4

The action is called VideoJS - Custom FFMPEG (as shown below).

Since CloudConvert give us X number of free conversions daily, I included my own key into the action, but because I’ve been testing all morning, I’ve used all those now!

I was testing with the Wait option set to Yes, which just makes that action wait until something comes back. If you’re videos are small, then you can do that and just save the result of that actions ‘converted file’ like this, otherwise I would recommend on setting up the webhook, and make sure you also implement some sort of error catching workflow because when it does error, it’s tricky to pinpoint.

image

I’m not sure on the quality of videos you’re working with but be mindful that they will be re-encoded. It should be fine, you can play with some of FFPMEG parameters, I’m no expert but this command will also work.

-filter_complex "overlay=W-w-5:H-h-5" -codec:a copy -preset ultrafast -async 1 /output/myVideo.mp4

Hope that helps :slightly_smiling_face:
Paul

1 Like

And there it is … as it is above … your support for customers unmatched mate, appreciate the detailed response!

Thank you for mentioning cloud convert, I’ve looked into it and it lead me down a lil rabbit hole and finally found a platform called switchboard,ai and currently waiting a reply as to when they’re releasing their “images over video” feature (currently in beta).

All done through API & Pabbly Connect (Zapier alt), so looks like this will do images & video, then I can play back the final video through VideoJS.

Thank you again buddy, legendary workmanship & customer care!

BIG Fan - AJ

Nice job and thanks !

@pork1977gm Today, the pause button on the player isn’t working on my end. I messaged you the error I’m getting as well.

js-video-pause-issue

Any help here would be appreciated.

Thanks @saviorabrams , I’ll reply on your PM

Hi @pork1977gm ! Amazing plugin!

I have a question,
BDK Wrap currently doesn’t allow html full screen in Android
(I’ve tested many, many plugins, and even yours doesn’t allow it)

Can you think about any workaround to do it?

Hi @ri_scc_94

I’ve not played with the BDK wrapper before, but you want the native full screen mode I assume?

As a test, what happens if you create a workflow (assign it to a test button or something) and run the “Execute method” action like this…

image

requestFullscreen();

Does it do anything?

Any chance to support TikTok videos? :wink:

https://developers.tiktok.com/doc/embed-videos/

Unfortunately it doesn’t work either… (I think it has to do with how BDK wrap was config by gaurav)

But, I would still be satisfacted if my User could at least watch it in a bigger player (like opening a popup with the player rotated and watching it from there)

I am currently allowing my user to send the video outside the app to open it in a player on google chrome, it’s really bad

Ok, so I think you should be able to use Bubble’s responsiveness to do it then. Maybe set a popup to be the page width… or if not using popups, set a group to use max-width then with the aspect ratio set in the player options (16:9) it should sort the height out automatically. It’s going to be one of those things where you’ll need to play with the layout settings, but it should be possible if you’re not using fixed withs.

To be honest, these are the type of things which keep me entertained for hours too!

Afraid not, well not at this current time anyway. Could you use Bubble’s HTML element and just copy that embed code into it? That should work.