New Plugin - Html5 Video, Youtube, Vimeo, Audio Player

We will look into the issue.

Thanks

Thanks for the quick response. It is a great plugin. Very stable and flexible. As I am tuning my app for the UI, I have run into some UI issues. For example, I am using this plugin to show some thumbnail of the video from YouTube. But the red log of YouTube took up the entire box even with the Control set to “no”.

Is there a way, to get rid of that red button? Or can we make it smaller?

I am using this instead of the Mux plugin. Hope this can be resolved. Thanks!

Could you send me the example page you are building?

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?

Hello, @salemmo409
It should work theoretically, worth a test
However, it’s not recommended to host the videos on bubble database (I am not sure what you are referring when you are saying bubble database)
serving video files can be complex and resource-intensive, and it may be more cost-effective and efficient to use a specialized video hosting service that is designed for this purpose.

Thanks

Just added a video tutorial on how to use the Universal Video Player plugin to play videos saved down to your database:

Other links:

@univgalaxy1112 How would I go about tracking how much data is consumed when a user watches a video (I am desiring to set up bandwidth limitations for users/visitors watching videos through this player)?

Would that be a custom video.js feature or is that something built-in that we could track in a simple workflow?

Hello, @ty1
There are a number of approaches.

  1. Server-side tracking.
  2. CDN metrics.
  3. Video Player Integration
    Integrate your video player with analytics tools. This video player provide APIs or integration options to track events like video starts, pauses, and completions. You can use these events to estimate data usage.

We don’t have a specific feature added to the player.

By the way, the ownership of the player is transferred to @alexcooney5 .

Best,

1 Like

Thank you for the response. Then would we be able to get the bitrate information of the currently loaded segment of a video in the metadata to be able to make such of an estimation in Bubble?
@alexcooney5

  1. I do not know how we could do server-side tracking in Bubble for this unless there is some NPM package that would allow such and then to take that and store data per user, I am not certain where to begin there.

  2. Our CDN does not offer that from a per “user” or a per directory basis, only in bulk all-together so we are not able to get that through them.

  3. This seems like the option, it would seem the missing piece of data that does not seem readily available is being able to extract the current bitrate of the video to make such of an estimation.

Any ideas? Or is there a simple plugin option or integration that is well known that could help? I have been doing some research but I have not found anything solid that would seem that it would work in Bubble.

Hi @ty1, thanks for your interest in the Universal Video Player plugin and sorry for the delayed response.

This isn’t something I’ve looked into before to be perfectly honest. I will have a think about it and see if I can find an NPM package or plugin that would do the job, but this is not an easy thing to implement I’m afraid :frowning_face:

February-24 Update
Just released a video tutorial on how to autoplay videos using the Universal Video Player plugin:

Other links:

If you have any questions on the plugin let me know! (I took over ownership of the plugin from @univgalaxy1112 a few months ago).

Hi @alexcooney5 ! I found this plugin and it looks amazing! However, I have an issue with displaying my video in the proper size.
When I use such settings:

The preview of the video looks like this:


It is displayed properly when I open it in a “full screen” mode.

On the other hand, when I change settings to “Fluid mode = no”, the size of the player is huge:

It looks like the Aspect Ratio settings are applied only to the container and not to the actual content of the player.

My goal is to be able to define the max width and max height for the player. Can you please help me out? I have been trying to set it up properly for a few hours now and couldn’t find a solution :frowning: Will appreciate a lot your support!
Best,
Anastasia

Hi @golspire, thanks for using my plugin!

Happy to help out here :slight_smile:

Just so I’m sure I fully understand your issue: what do you mean by '…when I open I in a “full screen” mode…'?

Do you mean the button in the bottom-right hand corner of the player?

Also, are you putting in an aspect ratio in the ApsectRatio field when fluid mode is set to ‘yes’?

Hi Alex,
thanks a lot for your answer! Yes, I have an aspect ratio set up.

I’ve uploaded 2 videos: one is vertical and the second one is horizontal. The preview for both of them looks like this:

However, when I click in the bottom-right hand corner of the player “full screen”, then I can see the actual video properly instead of the black screen.

I have tried several different settings: fluid mode + aspect ratio, fluid mode without ratio, no fluid mode, no min /max widgh and with it …

I am surprised that nobody else has the same problem :smiley: maybe I don’t see some obvious settings, cause right now it’s impossible for me to use the plugin :(.

Hi @golspire, thanks for sending on those details.

I suspect this should be straightforward to solve, but it’s hard for me to figure out exactly what’s going on without seeing the editor.

I’m going to send you a private message shortly requesting access to your editor :slight_smile: We’ll figure it out!