Forum Academy Marketplace Showcase Pricing Features

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

Anyone interested in having a sound wave appear for audio files, there’s now an action to enable what you see below. It’s configurable and produces sound/bar waves for both audio and video.

To hide the vertical line, you’d set it to 1 width and the same colour as the background.

1 Like

Hi @pork1977gm ,

I’m trying to use the plugin but it seems to be loading the whole video from vimeo before playing it.

e.g. Trying a long video: https://vimeo.com/195293813

It takes a while to load before starting.
Even though we have selected the preload none option.

image

Can you please clarify if the video hosted on vimeo needs to be fetched completely before playback?

Thanks
ZubairLK

Hi @ZubairLK
I’ll take a look at this for you and get back to you soon.

1 Like

Hi @ZubairLK,

Apologies for the delay, so you were right there was a minor bug with the preload option, it was being ignored for some reason so I’ve fixed that, tested it and it’s now working again. I’m in the process of finishing off the addition of a video recorder element, so once that’s all done I’ll push the update for you, probably tomorrow.

With regards to Vimeo files, they’re a bit of an odd one compared to how other formats play.
You pretty much have 2 ways of playing a Vimeo file. The first way is where the MP4 version of the file is retrieved and fed into the player (this is what you’re using based on your screenshots). The second way is allowing Vimeo’s own player to take control and play it.

Both options come with pros and cons really, whilst the first method has to retrieve the MP4 version of the file using an alternative service, it can occasionally take longer than expected. Once it has the file though, it’s then stored in a cookie to prevent subsequent calls trying to retrieve it again. There wasn’t an easy way to retrieve the MP4 version of the file, not without having a Vimeo PRO account where you can get at that file information directly using their API. I’m pretty sure this is Vimeo’s answer when playing through HTML5 players.

The second way is to select Yes to the option called “Use Vimeo player”. This invokes the Vimeo plugin and allows for Vimeo files to play directly within their own player. It’s nice and quick and just works, there shouldn’t be any delay either. There are however some major drawbacks with this approach! It uses outdated code (4 years old roughly) because the plugin itself isn’t maintained anymore because of various changes to Vimeo’s terms over the years. If you use this option, some actions may not work with the player. This might not be a problem depending on what you’re using it for but it’s something to be aware of. I wasn’t going to add this for a long time until the need came due to it being possible to set privacy settings which made it impossible for the first option to work.

Once I’ve pushed the update, try with the preload option of ‘None’ and see how it performs. I don’t think there’s much I can do to help with the delay but for the last couple of days there was issues with the proxy service I use to retrieve the MP4 file so it’s possible you’re delays were due to that problem. That’s all working again now so see how you get on. I did test your link you put up and it was almost instant for me but I know it’s not always like that and I am running the “preload” fix too.

I’ll put a post up on here once the update is ready anyway and I’ll have a look to see if I can improve the speed in other ways.

Thank-you for the detailed explanation.
Will try with the fix when its out.

In our use-case, we definitely need the timer events triggering (show a popup at configurable time durations) so cannot use the Vimeo player.

A quick question. We were able to upload the full video mp4 to bubble s3 itself. The file loads to s3 and should be reasonably fast.

There are essentially ~40 videos ~15 minutes long in the member area. The videos are intended to be 1080p. Used by phones. A limited audience of ~1000 people and just 2-3 months training. There will be busy periods but I doubt a 1000 will simultaneously try to load the same videos.

I’m guessing that s3 should be able to easily handle that kind of workload. I couldn’t really pinpoint if bubble hosting would be simple and sufficient in our use case.

Any idea if that is better/equally suitable. Any experience hosting videos on bubble s3 itself?

Thanks
ZubairLK

Ok no probs. If you can get them all into S3 then I would suggest using those URL’s to load into the player, that would definitely make them load a lot quicker. I can’t see any major speed restrictions you’ll run into although you may run into space limitations depending on the sizes of each video. I know there’s a limit on how much space you’re allowed in S3 and I think that would be dependant on the plan you’re on, but I’m unsure on what the limits are. There’s probably some info on the forum about that. @eve might be able to point you towards a link or give some advice here.

Update has been pushed @ZubairLK and @natserrano

This update also contains a new element, videoJSrecorder.
To make the recorder work, you’ll need to also have the ‘videoJSplayer’ somewhere on your page. At some point I will make them work independently.

Here are the details for what’s included with this new element.


ELEMENT

videoJSrecorder
This is the visual element dragged onto the page which contains the following field options. .

  • Enable video
    Enables the video stream.

  • Enable audio
    Enables the audio stream.

  • Max length
    Maximum length of the recorded clip in seconds. If left empty, the length will default to an hour of recording of time.

  • Display milliseconds
    Indicates if milliseconds should be included in time displays, e.g. 00:00:000 vs 00:00.

  • Picture-in-picture
    Enables picture-in-picture support if the browser supports it.

  • Auto mute device
    Turns off the camera/microphone devices (and light) when audio and/or video recording stops, and turns them on again when recording resumes. Not all browsers/devices support this option.


EVENTS

  • A videoJSrecorder has started recording
    Fires when a recording is started.

  • A videoJSrecorder has finished recording
    Fires when recording has finished and the recorded stream is available.

  • A videoJSrecorder has errored
    Fires when an error has occurred.

  • A videoJSrecorder has a device error
    Fired when an error has occurred that was caused by the device.

  • A videoJSrecorder has been saved
    Fired after the 'Upload recording' action has completed and the video file has been successfully saved to the database.

  • A videoJSrecorder has stopped recording
    Fires when a recording has been stopped.

  • A videoJSrecorder has paused recording
    Fires when a recording has been paused.

  • A videoJSrecorder has resumed recording
    Fires when a recording has been resumed.

  • A videoJSrecorder device is started
    Fires when the device has been started.

  • A videoJSrecorder device is stopped
    Fires when the device has been stopped.


ACTIONS

  • Upload recording
    Allows you to upload a completed recording to the S3 file storage area. The URL will be stored within the URL state.
    -File name
    Enter a file name to save the video as. The video will be saved as an MP4 file, you don't need to specify the file extension.

  • Start recording
    When the device has been started, this will start a new recording session.

  • Stop recording
    When the device has been started and a recording session is in progress, this will stop the current recording.

  • Pause recording
    When a recording session is in progress, this will pause recording.

  • Resume recording
    When a recording session is in progress and paused, this will resume recording.

  • Start device
    This starts the device.

  • Stop device
    This stops the device.


EXPOSED STATES

  • Is recording
    Shows Yes when a recording is in progress.

  • Device error
    Shows the error if the device itself has errored.

  • Error
    Shows any other error.

  • URL
    Shows the saved video file’s URL.

  • Device started
    Shows Yes when the device has been started.

  • Is paused
    Shows Yes when the device has been paused.


DEMO

The demo page is here:
https://paul-testing-4.bubbleapps.io/recorder?debug_mode=true

image

Is there a way to keep the default videoJS controls while enabling YouTube closed captions? The default videoJS controls work well for me when working with YouTube videos, but the moment I set the youtube control parameters, it breaks, even if I set the parameters to match the default (such as hiding controls, hiding the fullscreen option etc). The videoJS controls no longer affect or match what’s happening in the player afterwards.

Curious if there’s a workaround as I solely want to enable the captions. I also tried using the embed code url and forcing the cc_load parameter (which works in the browser), but not with the videoJS player.

Hi @gevestobs
I’ll take a look at that section and figure out what’s going on there.