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.
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: ertugrul bjk on Vimeo
It takes a while to load before starting.
Even though we have selected the preload none option.
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.
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.
Time slice
This option forces interval-based blobs and receives timestamps during recordings by listening for the timestamp event. Accepts a number in milliseconds, 1000 for example will return recorded data every second. This value needs to be set for live streaming to work.
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.
Start streaming
This action starts a streaming request to a given WebSocket endpoint (WSS).
-Stream key
This will be your MUX stream key that is provided in the response when running the 'Create Live Stream (MUX)' API request.
-WebSocket endpoint
This should be a secure WebSocket URL in the format of: wss://streammux.azurewebsites.net that is running the server part of this action.
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.
Duration
Shows the length of the recorded stream in seconds.
WebSocket connected
Shows Yes when the WebSocket connection has been established.
DEMO
The demo page is here:
https://paul-testing-4.bubbleapps.io/recorder?debug_mode=true
This page also demo’s a fully implemented Live Streaming feature.
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.
Good day sir!
So I have this template I am hoping to convert into an app, it’s a video game streaming platform.
I wanted to know if I could use this plugin to mandate ads to automatically play at the beginning and end of a video that has been uploaded by any user?
Or can I integrate ads like normal videos on the platform that will be automatically playing like a normal video uploaded?
Hey @renglassicorp
There is an Ad action which you could potentially use called “Load Ad”
It displays three sections which allows up to three advertisement videos to be played at specific points during the main video which has been loaded.
It should be able to do the job fine!
I can always tweak it if needed.
Okay, thanks!
Hi @pork1977gm
Can I disable all user interaction with the video, whether the link is from Youtube or Vimeo? If I disable the youtube controls then the user can still click the video to play/pause and if I enable videojs controls I have no way of making the whole thing irresponsive.
I’d like to have the video play/pause through actions or external buttons alone and make it impossible to interact with by clicking on it (Like the native Video player allows you to do on Bubble). Is this possible using your Plugin or do I need custom CSS?
Josh
Hi Josh, might be best to put a transparent shape over the whole video and make it not clickable.
Good call, I’ll try that. Thanks Paul!
no probs!
Hi Paul @pork1977gm
1/3 times when I load up a user page with a vimeo/youtube video within VideoJS (incognito mode) the console is showing the following error (below) and the player freezes. Even an external ‘Play’ button won’t bring it back to life. The rest of the time the error is still shown but the player loads properly. Any ideas?
[EDIT] It may actually be this error code that prevents videoJS from loading. The times when it works it doesn’t show:
Josh
Hi Josh, I’ve actually seen this and tried figuring it out in the past but without much luck. I’ll take another look and let you know what I find. I think is a common occurrence when trying to play YouTube videos through the videoJS code, I’m sure they’ll be a way to fix it. I’ll get back to you. The origin setting is being set but it looks like it’s being overwritten, not too sure at the moment.
Thanks Paul, I found this thread on Stack Overflow where people suggest adding the origin to the iFrame (src=“YouTube”) if it helps. Although a user points out that none of the fixes work in 2020.
Thanks Josh
