Just wanted to ask if there is any way for the player with audio waveform mode activated to stretch or shrink responsively? In order to use this as an element on my responsive site, it would of course need to shrink down at smaller page sizes, and ideally scale larger for wider pages.
I’ve tried the various object-fit options (including “Scale-down”), but they don’t seem to have any noticeable effect, nor do they scale the waveform down as the container gets smaller.
Let me know if there’s any workaround to this, or if it can be added to the plugin / audio waveform action- thanks, we really appreciate it!
So those object-fit options are related only to the videos but let me see what I can do. I’ll have a play with the waveform settings and see what I can come up. I’ll get back to you soon.
There’s a couple of Convert actions now added if you’re interested. One will convert audio files, the other will convert video files. They let you choose input/output formats and output a URL which you can then save to S3 to get into your Bubble storage. They do use CloudConvert to do the conversion though, which unfortunately requires an API key with them but they do the job well for the time being.
Just to let you know, I’m working on this. I can make it responsive but it has some issues with fluid mode and aspect ratios which I’m working on. Once I cracked it I’ll get back to you.
Hi, @pork1977gm, I have a couple of questions for you.
I was wondering if it is possible to make the player automatically go fullscreen after playing for 5 seconds? I’m seeing some rules that this would be achievable but I can’t seem to figure out how to put it together.
Is there a way to make the player always play in landscape mode? I’m trying to lock it similar to what Netflix does for mobile devices and avoid portrait mode altogether.
Hi, so to make it enter full screen after 5 seconds, you could create a workflow that says “Do when condition is true” make it run only Once and set the condition to be “when videoJSplayer currentTime > 5” then run the action “Execute method” action and enter: requestFullscreen();
For the landscape mode, it sounds like it’s not the player you need to worry about but the device’s orientation? Is it that you don’t want landscape mode to happen when the video is playing? I don’t think that can be done using JS since it’s the mobile device that controls this behaviour. I maybe wrong but maybe if you have an example, I can check it out.
Thank you @pork1977gm fullscreen is working perfectly! Yep, I don’t want portrait mode to happen when playing but restrict it to landscape mode (for example if you try to play Netflix on a tablet or mobile phone it is restricted to landscape mode) let me know if you think if this is possible to set up through the player.
One thing I noticed on mobile devices is that the native player takes over and overrides the plugin player. Is there a way around this?
The deprecated action Generate video thumbnails has now been removed and if you need to generate the scrubber thumbnail images for videos then you do so by running the server side action called VideoJS - Create Spritesheet. This action, along with a few others listed below now utilise custom FFMPEG commands setup to run with cloudConvert for further video processing.
There are a number of changes put into this update, more so than I normally add so here’s the write-up and a new demo page which shows these features in action. It has a backend workflow setup to capture data from cloudConvert when jobs are completed. The demo page doesn’t allow you to upload your own videos because I’m running out of free space, but if you have a URL then you can try using that.
VideoJS - Create Spritesheet
Use this action to generate a spritesheet that is used to display scrubber thumbnails. It will return a spritesheet image which you can use within the player option fields. This action utilises CloudConvert’s convertion utilities so you will need an API key.
. -Authorization key This should be the API key created in CloudConvert. Leaving the API key blank will resort to using a free API key that has 25 mins of free conversions per day, this may get eaten up quite quickly. -Media file Your video file. -Duration The duration of the video in seconds. Note that the VideoJSplayer's Duration state is only populated when a video starts to play (since the duration is not known until then). You can use the 'VideoJS - Get Duration' action to get this if needed. -Interval This is the snapshot interval setting which tells the process to take a snapshot every X seconds. Defaults to a value of 10. -Width The width of each generated thumbnail. -Height The height of each generated thumbnail. -Wait By default, when you run this task it will wait for the conversion to complete (synchronous). Setting this value to No will make it not wait (asynchronous) and you can then setup a webhook in your CloudConvert account to notify you when the conversion has completed. This requires a backend workflow in Bubble and the required configuration set within your CloudConvert profile. You can use the condition "Request Data's job task's name contains spritesheet-task" to determine if the data coming in from the webhook is from this action. You can see here for further information on this: https://cloudconvert.com/api/v2/webhooks#webhooks-events
VideoJS - Convert Video
Use this action to convert a video file to another format. It will return a URL which you can then use Bubble’s :saved to S3 option to save the file to your own storage area. This action utilises CloudConvert’s conversion utilities so you will need an API key.
. -Authorization key (Same as the authorization key description above). -Media file Your video file. -Auto detect Setting this option to Yes will attempt to auto detect the input file format, overriding any input format entered. -Input format The current format of the file to be converted, available formats are: 3g2, 3gp, 3gpp, avi, cavs, dv, dvr, flv, gif, m2ts, m4v, mkv, mod, mov, mp4, mpeg, mpg, mts, mxf, ogg, rm, rmvb, swf, ts, vob, webm, wmv, wtv -Output format The new format of the file you want to convert to, available formats are: 3gp, avi, flv, mkv, mov, mp4, mpg, mxf, ogg, rm, swf, ts, vob, webm, wmv. You may try other formats if not listed but the conversion may fail. -Wait (Same as the wait description above).
VideoJS - Convert Audio
Use this action to convert an audio file to another format. It will return a URL which you can then use Bubble’s :saved to S3 option to save the file to your own storage area. This action utilises CloudConvert’s conversion utilities so you will need an API key.
. -Authorization key (Same as the authorization key description above). -Media file Your audio file. -Auto detect Setting this option to Yes will attempt to auto detect the input file format, overriding any input format entered. -Input format The current format of the file to be converted, available formats are: aac, ac3, aif, aifc, aiff, amr, au, caf, flac, m4a, m4b, mp3, oga, ogg, sfark, voc, wav, weba, wma -Output format The new format of the file you want to convert to, available formats are: aac, ac3, aiff, flac, m4a, mp3, wav, wma. You may try other formats if not listed but the conversion may fail. -Wait (Same as the wait description above).
VideoJS - Get Duration
This action will return the duration for most videos and audio files in seconds.
VideoJS - Burn Subtitles
This action will output a new video file (defaults to MP4 format) that includes subtitles burnt into it. The subs are hard-burnt meaning they cannot be switched off.
. -Authorization key (Same as the authorization key description above). -Media file Your video file. -Subtitles file Your subtitles file, SRT and VTT file formats supported. -Wait (Same as the wait description above).
Options in the videoJSplayer element.
There are 2 places within the options which can utilise a spritesheet of images. Details of each are outlined below.
Scrubber thumbnails
The options shown below are to control the scrubber thumbnails and the details can be retrieved from the output of the VideoJS - Create Spritesheet action.
.
.
There’s also an associated action, in case it’s needed called Load scrubber thumbnails (not detailed above) which will let you load it through a workflow action if you can’t do it dynamically for whatever reason.
Scrubbing interface
This section can also be used and it allows you to use the entire video player as a scrubbing interface. It requires the spritesheet and the number of tiles contained within it which are returned from running the Create spritesheet action. Other options are included to further control this feature as shown below. Note, this has to be used with a fixed width player since the images don’t currently stretch as the element grows/shrinks. Again, there is an associated action for this too called Load scrubbing interface if needed in workflow actions.
.
This will more than likely be the last set of features going into this plugin since it has so much included now it’s becoming tricky to keep tabs on everything. Going forward though, all further video processing whether it be advanced conversion utilities, subtitle burning with font manipulation, merging videos, creating thumbnails etc will all be setup in a new plugin which will be dedicated on using FFMPEG and cloudConvert, or FFMPEG and Bubble if I can ever get it working.
It’s not supported in Safari on iOS though. I don’t think there is anyway which JS can lock the screen orientation on an iPhone but according the docs there it should work for everything else. To lock the orientation on iOS, you’d have to be running a swift app or something. I’m guessing the Netflix app you refer to isn’t a web app.
I have purchased the plugin, is there any tutorial on how to record and play a video using this plugin? I’m not super technical so was hoping there would be some tutorials out there.
One thing I noticed is that the in browser signal for the camera being on, stays on even after the recording has stopped. Is there any way to tell the browser that the recording is over? If no, this could spook users.
