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

Will do. Thanks!

Does this support .mov file type?

I get this image after trying to view a .mov file type uploaded directly into the video element

Screen Shot 2021-02-19 at 5.29.19 PM

Also, is there a way to use links from a Google Drive Account?

I’ve uploaded a video to my google drive, grabbed the link to share the file, and put the file link into the plugin element, but I’m not able to play the video…it was loaded into my google drive as an mp4 file.

Screen Shot 2021-02-19 at 6.11.06 PM

For me personally, I’m trying to avoid YouTube, because the plugin player still allows for a user to follow from the player to the youtube and I want these videos to be behind a pay wall. I don’t want to use Vimeo or Wistia because of their monthly fees.

My Bubble account is not letting me upload any files larger than a particular size, which means I can’t really upload video files longer than just 5 minutes or so. My next option was to use a cloud storage provider, such as google drive, but as of now, I’m not finding a way to get the video plugin to play those files or to preview them.

Hi @boston85719

I was playing with mov files recently, and whilst I could get some to work, the majority didn’t play. Unfortunately they’re not supported with html5 video playback. Some people have mentioned that when setting the mime type to video/mp4 they will play, but this isn’t the case all the time. It all depends on how those video types are encoded. There’s not much advice I can give you other than to convert them to another format first. I could look into the possibility of including a video convertor API or something.

The google drive, sharing links I can get that to work so will fix that today for you.

Thank you, this will be great.

I found this site for converting format as well as compression and seems to work well.

Leave this with me and I’ll get back to you soon.

oh wow this is great. There. is. always. a. plugin. these days :clap:

I have just purchased your plugin due to its advanced capabilities. I had also bought the earlier Videojs plugin from another creator, but it has issues with going to time codes and triggering events, so decided to give your version a try instead. With your version, I am having issues with Vimeo files not playing at all. I have four videos and only one plays. I have tried seeing if there are any differences between their privacy settings, but don’t see anything obvious. Am I missing something. The one that works, shows a video related right click menu including show controls (even though I have videoJS controls selected, I get nothing). The ones that don’t work has a black play button on the top right, which does not work and the contextual menu does not show any video related actions.

I have done some more fiddling and I set the Vimeo privacy to show it only on my Bubble custom domain. When I removed the domain specific limitations, it works. So which domain should I allow for the player to work as I still want the video to be private to app users only?

Hi @christo1 sorry about that, can you PM me the Vimeo URL’s you’re using and I’ll figure out what’s going on

PM Sent, thank you!

Another question: Can the player be set not to allow full screen mode?

The reason is, I am using a drawing overlay to allow video annotation. This works well in normal mode, but in Full screen mode, the drawing function ceases to work. So it would be great to be able to turn the full screen option off.

Ok sure, I have a few things on my list to make work today so I’ll start work on them today and get back to you once done. I have your PM thanks. Will be in contact soon.

Thank you. On another note, I have one long video, that I broke into video sections (data type) with a start and end time. When the end time is reached, I need to update a state as each video section can either autoplay (animation) or not, where I can draw on it. I have to add a pause action as soon as the video player reaches a specified time, otherwise the event triggers several times and glitches. The issue however, is that with the pause, the thumbnail for the Vimeo video displays for a second, before it jumps to the next section to play or not play again. Is there a way it does not show the thumbnail on pause, but rather the frame on which it is paused?

I’ve pushed an update which fixes the Vimeo issue you were having @christo1 and I’ve added an additional field value for disabling fullscreen mode in the player, which looks like this.

image

The update also addresses an issue when applying custom CSS files to the player.
When applying custom CSS, a class name of “.vjs-theme-custom” must be applied. Here’s a simple example of a working CSS file which can be uploaded to apply a Matrix style theme.

/* Change all text and icon colors in the player. */
.vjs-theme-custom.video-js {
  color: #00ff00;
}

/* Change the border of the big play button. */
.vjs-theme-custom .vjs-big-play-button {
  border-color: #00ff00;
}

/* Change the color of various "bars". */
.vjs-theme-custom .vjs-volume-level,
.vjs-theme-custom .vjs-play-progress,
.vjs-theme-custom .vjs-slider-bar {
  background: #00ff00;
}

A note on Vimeo videos with VideoJS.
This plugin uses the latest version of VideoJS (v7.11.4) and whilst it has ability to play Vimeo videos, VideoJS no longer officially support Vimeo playback anymore.

The Vimeo plugin which makes it possible to play these videos isn’t maintained, this is mainly because several years ago Vimeo changed their terms of usage to disallow disabling their controls and showing custom controls on top. If Vimeo were to change their terms and allow for such control I can’t see VideoJS fully supporting playback in the future.

After a fair bit of testing with this, it can potentially cause a few problems (although the player loads and they will play) some of the actions/controls within this plugin may not work as expected. All of this, you will only run into potential problems when you set this option (shown below) to Yes.

I have put some thought into this option before adding it, because I don’t particularly want to cause problems but for what you need (regarding privacy controls) you’re going to need it.

image

When this option is set to Yes, the code in the Vimeo plugin is put to use and when you load Vimeo files you will see them in Vimeo’s own player. You can also use Vimeo’s privacy controls fine. When you add a specific domain, it should be your site. For example, my demo page would be paul-testing-4.bubbleapps.io.

When this option is set to No, Vimeo files are played in a slightly different way where the MP4 version of the file is retrieved and loaded directly into the VideoJS player. This way, all controls work and everything is fine. The process for getting the MP4 file will fail if you have any video privacy settings in place through your Vimeo account. Your settings need to look like this for it to work.

image

Awesom, thank you.

Hi @boston85719 and @kurniawandennis

I’ve added support for playing videos from Google drive sharable links and Uploadcare links.
There are a few things to watch out for though, specifically Google.

Google drive
Get the sharable link.
image

And copy it
image

Things to watch out for
In order for these to play, you will have to specify the video’s MIME type. This can be done by using the new field option on the element or from the Load media file action as shown.

Please take note of the descriptions seen there. You’re limited to 100mb files through Google unless you have a Google Drive API key which is now included in the API keys section.

If you don’t have a key and need to get one, then go here:
Enable the Google Drive API | Google Developers



Uploadcare
All you need is the URL which is in the format below, and the MIME type. As far as I’m aware, there’s no types of restrictions like there is with Google.
https://ucarecdn.com/c35r4fbd5-0925-4a29-82dd-28bO4431a120/

The update has been pushed, let us know if you run into any problems.

Seems to be a problem with the plugin…I can not access the load media workflow action.

I have the video player on my page…when I go to workflows I can not locate the load media action. I’ve checked my other pages that were set up prior to updating the plugin and the actions are still available on them, but for some reason on a newly created page with a new video plugin element on the page, after updating the plugin, I can not access the workflow actions

Try reloading the Editor

1 Like

Hi @pork1977gm, seems that something has changed between version 1.19.0 and 1.20.0 in the way the player resizes.

I’m controlling the height of the player with some CSS in order to make it full-height.

height: 100vh !important;

Up to version 1.19.0 (included) it used to work fine (with any video source btw):

But since version 1.20.0 (which is labeled “field added to pause videos when not visible”), it doesn’t extend to full-height anymore, even though I didn’t change anything.

Especially, I didn’t modify fluid mode or aspect ratio:

image

Any hint?

Ah thanks for pointing that out, I’ll figure out what happened and get back to you soon.

1 Like