Templates Plugins Courses

🎞 Plyr - Video Player - New Plugin from Zeroqode

Plyr’ Video Player Plugin is simple, lightweight, accessible and customizable library with HTML5, YouTube and Vimeo media player that supports modern browsers. This video player comes with range of Events, Actions and States to work with out of the box.

Live demo: https://zeroqode-demo-21.bubbleapps.io/plyr

For details, screenshots and demos please visit the plugin page at: https://zeroqode.com/plugin/plyr---video-player-plugin-1585752713801x567609432761491140

Levon Terteryan

Founder @ Zeroqode

zeroqode-for-web-160x120

Bubble Templates

Zeroqode Blocks

Bubble Plugins

Bubble Courses

Convert Web to iOS & Android

No-code Development Services

Hey guys, this plugin looks amazing with great potential,
I have some questions

  • Is it possible to get the FPS of each video (24 fps or 25 fps or 30 fps or 60 fps ) as a caption?
  • Is it possible to use the “Seek To” Action Caption to go to a desire point in time in the video using an slider input element?
  • I am asking this because I would need to move the video frame by frame to generate comments in a desired frame , so I was thinking, knowing the FPS and the length of the video I could calculate a desire frame in the video and go there ( I need to be precise, and go frame by frame forward or backwards in the video when pause using a button, lets say I am in the second 23 of a video and clicking a button a can go forward to the second 23 frame 02 and if click again go to the second 23 frame 03 and again frame 23 second 04 and so on… and the same going backwards, click a button and go back frame by frame)

I hope I am somewhat clear here!

Regards,

Carlos Escobar


Hello @caeroa

Thanks for reaching out!

Let me provide insight into the matter.

  1. No, unfortunately, it is not possible to obtain the value of the frame per second.
  2. It should be possible to use the slider’s value with Seek To Action in the workflow, however, I believe you’ll need an event that will handle the action so the time frame will change on to the desired time point.

Also, it is possible to subscribe to it and try - you will be charged only for the actual days used, the fee is added to the monthly bill (or yearly if the user is on a yearly plan), and the amount is prorated. If you subscribe to a plugin for one day you’ll end up being charged for this plugin fee / 31 ,

Hope this helps.

Regards,
Dumitru.

Hi @Dumitru I would love to try it , but unfortunately I am on a professional legacy plan that I don’t want to loose and it doesn’t allow me to try any plugin, only buy it completely.

Does this media player support videos from my s3 bucket? Example, I want users to upload videos and they will be able to be played on another page for website traffic to watch.

Hey @Dumitru I have purchased the plugin but I am having certain difficulties working with it.
first of all take a look all the errors and warnings the google chrome console is showing me:

  • When BubbleVideo A is in the page:

image

and when I click play this keeps repeating forever until I pause or spot the video:

  • When YouTubeVideo A in the page:

image

image

image

  • When VimeoVideo A is in the page:

image

image

After all this I need you to please guide me how to use the events “video seking” and " video seeked",
also the action " seek to", I am trying to forward or rewind the video to certain point in time in the video timeline and is has been imposible so far, I cant figure it out how to do it, every time I use seek in any combination, the player stops and the progress bar start to act like crazy.

Thanks.

Hi @caeroa,

Thanks for reporting. Let me jump in here to help you.

Have you tried to check our docs here and demo editor here to make all proper configurations and perhaps try to replicate the workflows?

But if you have double checked and these errors still persist, you can go to Settings - Collaboration tab within your editor. Add our [email protected] account to your collaborator’s list. Also, please tell us your app name and page name where this problem occurs on test.

It would be best to create a blank testing page so we could tweak and test the plugin on your side if you don’t mind of course. Just to speed things up.

Note: avoid the warning message regarding plan, as we are an agency and you can easily add us to your collaborators.

We’ll investigate it inside your app and get back to you with a feedback asap. :pray:

Best,
Alex

Hey @alexandru.rusnac thanks for getting back at me.
I have checked all the docs and demo (btw, the demo link you sent me is the same docs link, the doc demo is here ) and there are no workflows in the demo, just some element showing video information, that is why I am asking for a little more information on how to use seek to go in a point in time in a video.
regarding the problems and adding collaborator, I will see how to do it later, but for now could yo help me with the seek action, that is what I need really urgent.
Thanks.

Thanks @caeroa for feedback.

Uh, oh! Sorry about this one.

Sure, you can do it whenever you want, just let me know. As for Seek action, you just use it with a button click event, for example:

image

And you need to indicate a number (in seconds) which it is going to seek this position in your video.

You can also play around with plugin’s states by simply displaying them in a text element. So when you press the seek button, you can see that Current Time state sets to 3 and Seeking is yes,

and when the seeking ends, this state turns to no:

Hope it helps.

Hey @alexandru.rusnac , it doesn’t work for me, Take a look:

( I already added the email ascollaborator )

app: flual-v02
page: test2_plyr

thanks

@alexandru.rusnac

it looks like the seek action is working for vimeo and youtuve, for videos using a link in amazon or azure is not working !

HI there, just bought this plugin, but I seem to be missing something. How do I set videos to autoplay? I put a Bubble Video element on the page and set it to play on Page Load, but nothing happens… also hiding comands, muting… none of the commands I use work. Any ideas? Thanks!

Hi guys,

Thanks for feedback.


@caeroa, unfortunately, we do not have permission to your application. But yes - it is not possible to use Azure links, it can only use Bubble’s AWS url as a dynamic source, or you can upload a static file and things will work smoothly!


@fernando, I’m afraid it is not possible to user our plugin’s actions with On page load event, because recently browsers have updated their policies, and now it is required to interact with the DOM, meaning you need to have at least some buttons on your page and implement the workflows for click events, so you will be able to use its actions like hiding commands, muting, autoplaying etc.

If you still have any issues, please post more details like screenshots of your app, workflow and plugin setup, so we can have a better understanding then provide working solutions asap.


Thanks!

Best,
Alex

Thank you Alexandru.

This is weird, because with Video.js playing does work on Page Load. why wouldn’t Plyr work?

In any case why wouldn’t the other commands work with it? (hide controls, mute etc). Here is my setup.

Thanks again!

Thanks @fernando for feedback.

Unfortunately, it might not always work On page load with our plugin due to Plyr library which plugin is based on, as well as an iFrame component that we are not able to influence on. But if you’d like to use plugin’s actions on page load, there is a possible workaround that should help.

You can Add a pause before next action as the first step on page load, then proceed with any actions you prefer. But it is important to mention that Bubble Video element might not always work as expected. However, the Youtube and Vimeo ones are running smoothly on page load.

Hope it helps.

This looks great and may fit the bill for a project I’m working on. One observation - I tried the demo page examples on Safari and Chrome - switching to full screen mode works fine on Chrome but on Safari (OS X) the video goes full screen then immediately reverts back.

Thoughts?

Cool thanks @alexandru.rusnac

Hi guys,

Thanks for your feedback.


@rsszombie please let us investigate with our development team and see whether there is a possibility to fix this problem on our side, because our plugin is based on an external Plyr library. I’ll get back to you with another reply asap.


@fernando always welcome! Let me know if you have more questions. If you like our plugin so far, could you please rate it by going to Plugins tab in Bubble editor? You can find the plugin by name and give it as many stars as it deserves. The more feedback we get, the more motivated we are to build great plugins. :pray:


Best,
Alex

Hi @alexandru.rusnac still having issues… Controls keep appearing when the video player is hovered or clicked.

Also, is there a way to have the video fill the entire container width?

image

Hi guys,


@rsszombie unfortunately, this issue is not reproducing on our side. Could you please check on this resource - https://plyr.io/ - and test the same thing on your side, because this is an external library our plugin is based on. So if you experience the same reverting issue, the reason causing it might be your browser settings. Perhaps you have some extensions or it simply needs to be updated.

However, if you don’t encounter the fullscreen issue on Plyr website, on Safari, then we’ll have to investigate on our side and fix it.


@fernando could you please explain in more details, what exactly you are trying to accomplish with our plugin. As based on this screenshot we can only see that you are using a custom event to toggle controls and mute buttons, before playing it.

Please share screenshots of your app, workflow and plugin setups so we could try to replicate on our side and see whether it is a plugin related issue or not. A screencast of your Preview would be super helpful.

Also, name the browser and OS version you are using to develop your application.

We’ll check on it and get back to you asap.


Thanks!