Hi all,
I’ve released an advanced version of VideoJS plugin (using the latest version of v7.11.4) with a whole bunch of extra stuff included. You can load video, audio and images through it.
PLUGIN
VideoJS Advanced + MUX Plugin
DEMO
https://paul-testing-4.bubbleapps.io/web_videos
It will play all HTML5 playable formats, YouTube, Vimeo and Wistia videos and a handful of audio files. It also supports HLS, DASH, LIVE video streams (.m3u8) and some future HTTP streaming protocols. It also includes the latest VideoJS MUX plugin and has support for adding subtitles which you can create the transcriptions using the Happyscribe API endpoints (also included). All features listed below.
For MUX, you just need to provide your environment key and check the box shown here to send the data across.
YouTube videos play in the YouTube player and all the standard YouTube controls for this player are included. All other video types will play in the VideoJS player, that includes Vimeo and Wistia (they don’t use their own native players) as to make sure all actions/controls work with those too.
Some features that are included:
-
Can play and pause media automatically as they are scrolled on/off the page.
-
Can play audio files (mp3, wav, aac and flac). Can also view image files (svg, jpg, bmp, png, gif).
If you need more formats then let me know. -
Will send data over to your MUX account as videos play (requires your API key).
-
Can load and control a series of pre-roll advertisement videos which load during any main video playing.
-
Has the ability to pause or play all media types at once on a page. There’s also an option to automatically pause a video regardless of where it is on the page, including inside repeating groups where actions can not easily reference the player.
-
Has the ability to execute any of the methods defined here by running the “Execute method” action.
-
Can choose from 5 pre-set video player themes.
-
Supports custom skin files. Like the CSS in this example, although this isn’t perfect by any means! Video.js Netflix Skin (codepen.io)
-
X/Y coordinates are put into states when the player is clicked. These coordinates are relative to the player, so top left corner of the player will always be 0,0. You can use these to add comments at specific locations over the player with the current playtime state.
-
Includes API endpoints for both Action/Data to retrieve data from Vimeo files and Happyscribe (transcribing videos).
-
Can load generated subtitles as a VTT file. Demo page shows a way where you can edit the subtitles as the video plays.
-
Can show video thumbnail previews when scrubbing.
-
Has the ability to trigger a “time event” so when either the percentage specified during playback is reached or the time in seconds is reached, this event will fire.
-
Includes the quality selector option in the player for HLS and DASH streams.
-
Media playback can be specified from any point.
A note on video URL’s
All videos take the full URL for the source with the exception of Wistia videos.
All you need for a Wistia video is the video ID. Take a look at the demo to see some examples, specifically the Video table. I may look into making this process a little simplier at some point.
To get the Wistia video ID, you can right click on any Wistia video, select “Copy link and thumbnail” and paste the contents of the clipboard into some text editor.
It will give you something which looks similar to this…
<p><a href="https://wistia.com?wvideo=kjvkb1eroi"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" width="400" height="225" style="width: 400px; height: 225px;"></a></p><p><a href="https://wistia.com?wvideo=kjvkb1eroi">Video marketing software for business | Wistia</a></p>
What you need here, is the value for wvideo so in the example above it is kjvkb1eroi.
Below outlines a list of all events, actions and documentation.
You can view the editor here: [VideoJS Advanced | Bubble Editor]( Paul-testing-4 | Bubble Editor)
Feel free to request more features or report bugs.
Regards
ELEMENTS
videoJSplayer
This is the visual element dragged onto the page which contains the following field options.
-
Media URL
Your media file, supports all HTLM5 playable formats, YouTube, Vimeo and Wistia. For YouTube and Vimeo, use the full URL. For Wistia, just enter the media ID. Also supports audio files and image files. -
Use MUX
When this option is selected, data for the media (when it starts to play) will be sent over to your MUX account. Make sure you have the API key specified in the plugin settings to see the data. Note: No data is sent for m3u8 formats. -
Poster
Specify an image to be shown while the video/audio is downloading, or until the user hits the play button. -
VideoJS Controls
Specify whether the VideoJS controls should be displayed or not. If you’re viewing a YouTube video and wish to display the YouTube controls instead, then run the action called ‘Set YouTube Parameters’ and specify the controls option. -
Autoplay
This will allow the media to start playing automatically when available. -
Loop
This will allow the media to start over again, every time it’s finished. Note: When you set this value to ‘yes’ then the event ‘media has ended’ will not trigger. -
Muted
Specifies that the audio output of the media should be muted. -
Playback rate
Sets the current playback rate. A playback rate of 1.0 represents normal speed whilst 0.5 would indicate half-speed playback. The maximum playback rate which can be set is 16, unless you have a YouTube video playing, as the YouTube video player only supports up to a value of 2 (double playback speed). -
Preload options (auto, metadata, none)
Auto: Indicates that the whole media file could be downloaded, even if the user is not expected to use it. Metadata: Indicates that only media metadata (e.g. length) is fetched. - None: Indicates that the media should not be preloaded. -
Fluid mode
Enable fluid mode, this keeps the player sized to a particular aspect ratio. When you turn this on, the player isn’t responsive. -
Aspect ratio
You can specify an aspect ratio to use if you don’t want to use the intrinsic values from the video element or if you have a specific ratio in mind. This option is in the form of two integers separated by a colon like so 16:9, 4:3 or 1:1 (which would be a square). -
Viewport autoplay
Allow media files to autoplay when they come into the viewport (onto the page). This is particularly useful if you have a repeating group of videos, as each video is scrolled into view it will play, when the video is scrolled out of view it will stop playing. If a video shows on page load, you can use this in conjunction with the autoplay option to start it immediately when it loads rather than waiting for a scroll event to start playing it. Note: This doesn’t work too well if you’re repeating group is more than one column wide. -
Theme (base, city, fantasy forest, sea, custom)
Select one of the pre-set themes to customise the appearance of the player. If you want to load your own CSS file then set this option to Custom and upload your CSS file below. -
Custom CSS (skin file)
Load a custom CSS file. This will only take into effect when the Theme option has been set to Custom. -
Centre play button
Centre the ‘play’ button into the middle of the player if it’s not already been centred from applying a theme. -
Disable pause on click
This allows you to disable the ‘pause’ if the player is clicked and the video is playing. -
Disable play on click
This allows you to disable the ‘play’ if the player is clicked and video is paused. -
Pause when not visible
This allows you to automatically pause a media when it’s not visible. -
Exit fullscreen on click
This allows you to exit full screen when you click the video, rather than have it pause/play.
DATA CELLS - (API endpoints)
Endpoints exist under both ‘Action’ and ‘Data’ The list below doesn’t outline all the API requests, there are a handful of Wistia ones also.
-
Get data (vimeo)
Enter a valid Vimeo Id here. The URL containing the Mp4 file will be at request.files.progressive.url. To see the data for all the fields you can load this URL into your browser: https://player.vimeo.com/video/76979871/config -
Get data (wistia)
Enter a valid Vimeo Id here. -
List transcriptions (happyscribe)
Returns a list of transcriptions you’ve previously created. -
Create transcription (happyscribe)
Creates a new transcription. -
Retrieve transcription (happyscribe)
Retrieves information about a specific transcription. Accepts the the transcription Id that was returned when running the endpoint to create a new transcription. -
Create an Export (happyscribe)
Creates a new export. -
Retrieve an Export (happyscribe)
Retrieves information about a specific export. Accepts the export Id that was returned when you run the endpoint to create a new export.
The HappyScribe API requests have all been tested and accept all available parameters. If you plan to use these, take a look at their documentation: Transcriptions – HappyScribe API
You can also refer to the Happyscribe integration demo page at: https://paul-testing-4.bubbleapps.io/transcription.
EVENTS
-
A videoJS player has started
Fired every time a media file begins to play. -
A videoJS player has ended
Fired when the media playback ends. This will not trigger when the media has been set to loop. -
A videoJS player has been paused
Fired every time a media is paused. -
A videoJS player has loaded data
Fired when the player has downloaded data at the current playback position. -
A videoJS player has loaded metadata
Fired when the player has initial duration and dimension information. -
A videoJS player has updated the time
Fired when the current playback position has changed * During playback this is fired every 15-250 milliseconds, depending on the playback technology in use. -
A videoJS player has changed the volume
Fired when the volume changes. -
A videoJS player has errored
Fired when an error as occurred. -
A videoJS player user is active
Fired when the user is active, e.g. moves the mouse over the player. -
A videoJS player user is inactive
Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction. -
A videoJS player is in viewport
Fired when the player is scrolled onto the page. -
A videoJS player is out of viewport
Fired when the player is scrolled off the page. -
A videoJS player reaches a specified time
Fired when a media file reaches a certain point during playback. -
A videoJS player coordinates are changed
Fired when the player is clicked and the coordinates are changed.
ACTIONS
-
Vimeo - Get data
Enter a valid Vimeo Id here. The URL containing the Mp4 file will be at request.files.progressive.url. To see the data for all the fields you can load this URL into your browser: https://player.vimeo.com/video/76979871/config -
Play (with options) a videoJS player
Plays a media file allowing you to specify some additional options.
-Start Time (secs)
Allows you to specify a start time (in seconds) from which to start playing at. For example, setting a value of 10 will start playing 10 seconds into the media instead of from the beginning.
-Loop
This will allow the media to start over again every time it's finished. Note: When you set this value to 'yes' then the event 'A videoJS player has ended' will not trigger. -
Pause a videoJS player
Pauses a media file. -
Restart a videoJS player
Restarts a media file.
-Play
Play the media after it's restarted. -
Set play back time a videoJS player
Allows you to specify a time at which to jump the media to. This value should be in seconds.
-Time (in seconds)
Enter a value (in seconds) to set the current playback time to.
-Play
Start playing the media once the current time has been set. -
Play a videoJS player
Plays a media file. -
Loop a videoJS player
This will allow the media to start over again, every time it’s finished. Note: When you set this value to ‘yes’ then the event ‘A videoJS player has ended’ will not trigger.
-Loop
Set the value to Yes or No to set the loop value. -
Mute a videoJS player
Specifies that the audio output of the media should be muted.
-Mute
Set the value to Yes or No to set the mute value. -
Centre play button a videoJS player
Centre the ‘play’ button into the middle of the player if it’s not already been centred from applying a theme.
-Centre play button
Set the value to Yes to centre the play button, or set the value to No which will use the default position specified by the selected theme. -
Toggle VideoJS controls a videoJS player
Specify whether the VideoJS controls should be displayed or not.
-Show controls
Set the value to Yes to show the controls or No to hide them. -
Load media file a videoJS player
Your media file, supports all HTLM5 playable formats, YouTube, Vimeo and Wistia. For YouTube and Vimeo, use the full URL. For Wistia, just enter the media ID. Also supports audio and image files.
-URL
URL to the media file -
Set YouTube controls a videoJS player
Specify any YouTube controls. Note: For stability, these controls (and the states) are reset every time a new YouTube video is loaded.
-Show controls
This parameter indicates whether the YouTube video player controls are displayed.
-Show full screen icon
Setting this parameter to No prevents the full screen button from displaying in the player. The default value is Yes, which causes the full screen button to display.
-Color
Accepted values are "red" and "white". This parameter specifies the colour that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. The default colour is red in the video progress bar.
-Language preference
This parameter specifies the default language that the player will use to display captions. Set the parameter's value to an ISO 639-1 two-letter language code. If you use this parameter and also set the cc_load_policy parameter to 1, then the player will show captions in the specified language when the player loads. If you do not also set the cc_load_policy parameter, then captions will not display by default, but will display in the specified language if the user opts to turn captions on.
-CC load policy
Setting the parameter's value to Yes causes closed captions to be shown by default, even if the user has turned captions off. The default behaviour is based on user preference.
-Disable keyboard
Setting the parameter's value to Yes causes the player to not respond to keyboard controls. The default value is No, which means that keyboard controls are enabled.
-Interface language
Sets the player's interface language. The parameter value is an ISO 639-1 two-letter language code or a fully specified locale. For example, fr and fr-ca are both valid values. Other language input codes, such as IETF language tags (BCP 47) might also be handled properly. The interface language is used for tooltips in the player and also affects the default caption track. Note that YouTube might select a different caption track language for a particular user based on the user's individual language preferences and the availability of caption tracks.
-IV load policy
Setting the parameter's value to Yes causes video annotations to be shown by default, whereas setting to No causes video annotations to not be shown. The default value is Yes.
-Prevent YouTube logo
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to Yes to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
-Playsinline
This parameter controls whether videos play inline or full screen in an HTML5 player on iOS. Valid values are No which causes full screen playback. This is currently the default value. A value of Yes causes inline playback for UIWebViews created with the allowsInlineMediaPlayback property set to TRUE. -
Set playback rate a videoJS player
Sets the current playback rate. A playback rate of 1.0 represents normal speed whilst 0.5 would indicate half-speed playback. The maximum playback rate which can be set is 16, unless you have a YouTube video playing, as the YouTube video player only supports up to a value of 2 (double playback speed).
-Playback rate
Sets the current playback rate. -
Set volume a videoJS player
Sets the volume.
-Volume
Sets the volume, value ranges anywhere between 0 and 1 where 0 is off (muted), 1.0 is all the way up, 0.5 is half way. -
Execute method a videoJS player
This will allow you to run a method against the VideoJS player which hasn’t yet been included in this plugin. For example, if you wanted to make the player go into full screen mode, you could enter the value: requestFullscreen(); - Refer here for a list of methods.
-Method
Enter the method command here. -
Play all medias a videoJS player
This will play all media files (video/audio) currently on the page. -
Pause all medias a videoJS player
This will pause all media files (video/audio) currently on the page. -
Trigger time event (single) a videoJS player
Allows you to trigger the time event when either the percentage specified during playback is reached or the time in seconds is reached.
-Trigger using
Select one of the 2 intervals to use (percentage or seconds).
-Interval
Enter a number here which will represent either a percentage value or time in seconds. During playback when this interval is reached, the time event will be triggered.
-Pause
Specify whether you want the media to be paused when the event is triggered.
-One time event
Set this value to Yes if you want the event to trigger just the once. Set it to No if you want the event to trigger every time the criteria is met. -
Populate state “Video element Id’s” a videoJS player
This will populate the state called “Video element Id’s” with a list of all visible videoJS elements on the page. -
Load subtitles a videoJS player
Loads a web VTT file that is used to display subtitles. They will then automatically display. You can generate this transcription file with the included Happyscribe API requests or load your own files. Running this action multiple times will add more subtitle tracks.
Note: If you require support for different subtitle formats, SRT files for example and want to load them instead, Happyscribe offer free Conversion Tools. Other formats are untested at the moment. You can also burn the subtitles into a video file and download the video, although the original quality is substituted to make the process some what quicker.
-Track file
Load the VTT subtitles file here.
*-Kind-
Subtitles: - Translations of the dialogue in the video for when audio is available but not understood. Captions: - Transcription of the dialogue, sound effects, musical cues, and other audio information for viewer who are deaf/hard of hearing, or the video is muted. Chapters: - Chapter titles that are used to create navigation within the video. Typically, these are in the form of a list of chapters that the viewer can use to navigate the video. Descriptions: - Text descriptions of the action in the content for when the video portion isn't available or because the viewer is blind or not using a screen. Metadata: - Tracks that have data meant for JavaScript to parse and do something with. These aren't shown to the user.
-Label
Short descriptive text for the track that will used in the user interface. For example, in a menu for selecting a captions language.
-Default
Boolean value to determine if this should be the default track.
-Language
The valid BCP 47 code for the language of the text track, e.g. "en" for English or "es" for Spanish.
-Mode
Disabled: - The track does not show on screen as the video is playing. Hidden: - The track will update as the video is playing, but it won't be visible to the viewer. Showing: - The track is visible to the viewer and updates while the video is playing. -
Toggle subtitles a videoJS player
Toggle whether subtitles should be shown or not.
-Show
Set the value to Yes to show subtitles (if they have been loaded) and No to hide them. -
Remove subtitles a videoJS player
Remove a specific subtitle by it’s label name.
-Label
Specify the label name of the subtitle you wish to remove. -
Load video thumbnails a videoJS player
Load a video thumbnail content sheet. This action requires a generated sprite image of thumbnails for a video which you want the thumbnails to appear on. The video thumbnails are shown as the progress bar is moved to various positions. By default, video thumbnails are not shown because, although we tend to take them for granted these days, they’re actually comprised of a set of generated images stitched together for which this plugin will work out when to display. To generate the sprite image, you can refer to this tool I put together: Generate thumbnail sprite
There is a section further down in this post which explains how this works in more detail.
-Content sheet
This should be the video thumbnail content sheet.
-Interval
Interval between thumbnail frames in seconds.
-Width
Width of the thumbnail in pixels.
-Height
Height of the thumbnail in pixels. -
Trigger time event (list) a videoJS player
Allows you to trigger the time event when either the percentage specified during playback is reached or the time in seconds is reached.
-Trigger using
Select one of the 2 intervals to use (percentage or seconds).
-Interval
Enter a list of numbers here which will represent either a percentage value or time in seconds. During playback when each interval is reached, the time event will be triggered.
-Pause
Specify whether you want the media to be paused when the event is triggered.
-One time event
Set this value to Yes if you want the event to trigger just the once. Set it to No if you want the event to trigger every time the criteria is met. -
Set VideoJS controls
Specify any of the standard VideoJS controls here. This is only a handful of what’s available, let us know if you need others adding.
-Seek enabled
Set the value to Yes to show both seek control icons or No to hide them.
-Seek back
Sets the seek 'back' value to allow the video to jump back by X seconds when the button is clicked. Make sure 'Seek enabled' is set to Yes.
-Seek forward
Sets the seek 'forward' value to allow the video to jump forward by X seconds when the button is clicked. Make sure 'Seek enabled' is set to Yes.
-Remaining time
Set the value to Yes to show the remaining time in the control bar or No to hide it.
-Full screen
Set the value to Yes to show the full screen button or No to hide it.
-Progress control bar
Set the value to Yes to show the progress control bar or No to hide it.
-Playback rate
Set the value to Yes to show the playback rate button or No to hide it.
-Picture in picture
Set the value to Yes to show the picture in picture button or No to hide it.
-Play button
Set the value to Yes to show the play button or No to hide it.
-Volume panel
Set the value to Yes to show the volume panel or No to hide it.
-Playback rate button
Set the value to Yes to show the playback rate button or No to hide it. -
Add overlay
Adds an ‘overlay’ comment box on the video.
-Content
This is the HTML that will be contained in the overlay. You can pass in a string or an HTML element.
-Start
This value is a number and is used to define when to show an overlay. It will be displayed when the time (number in seconds) in the video playback has passed.
-End
This value is a number and is used to define when to remove an overlay. It will be removed when the time (number in seconds) in the video playback has passed.
-Align
Where to display overlays. Valid values are: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left.
-Show background
Determines whether or not to include background styling & padding around the overlay.
-Attach to control bar
The value can be a string or boolean. If the value is a string, the value must be the name of a ControlBar component. If set to true or a string value, bottom aligned overlays will adjust positioning when the control bar minimizes. This has no effect on overlays that are not aligned to bottom, bottom-left, or bottom-right.
EXPOSED STATES
-
Duration
Shows the full duration of a media file in seconds. -
Current time
Shows the current play time of a media file in seconds. This state is populated when it starts to play. -
Current time remaining
Shows the current remaining play time. -
Media URL
Shows the current media URL. -
Poster
Shows the current media’s poster image. -
Controls enabled (VideoJS)
Shows if the current player has the VideoJS controls enabled or not. -
Autoplay
Shows if the current media is set to autoplay. -
Loop
Shows if the current media is set to loop. -
Muted
Shows if the current media is set to mute. -
Preload
Shows the current media’s preload value. -
Layout
Shows the current media’s layout value. -
Viewport autoplay
Shows if the current media is set to automatically play and pause as it enters the viewport. -
Theme
Shows the current players selected theme. -
Centre play button
Shows if the current media’s play button is set to center. -
File extension
Shows the current media’s file extension if available. YouTube videos will show “youtube”, Vimeo videos will show “vimeo” and Wistia videos will show “wistia”. -
Loaded data
Shows if the current media has downloaded data at the current playback position. -
Loaded meta data
Shows if the current media has initial duration and dimension information. -
Is playing
Shows if the media is playing or not. -
Controls enabled (YouTube)
Indicates if the current video has the YouTube controls enabled or not. -
Full screen icon (YouTube)
Indicates if the small full screen icon is enabled in the YouTube player or not. -
Progress bar colour (YouTube)
Indicates the colour of the YouTube progress bar. -
Preferred language (YouTube)
Indicates the current language preference if used. -
CC load policy (YouTube)
Indicates if closed captions are to be shown. -
Disable keyboard (YouTube)
Indicates if the keyboard controls have been disabled or not. -
Interface language (YouTube)
Indicates the player’s interface language if used. -
IV load policy (YouTube)
Indicates whether video annotations should be shown or not. -
Disable logo (YouTube)
Indicates whether the YouTube logo appears in the player. -
Playsinline (YouTube)
Indicates whether the playsinline options is switched on or not. -
Playback rate
Indicates the current playback rate/speed. -
Volume
Indicates the current volume. -
Percentage played
Indicates as a percentage the current played time. -
Is scrubbing
Indicates whether or not the user is “scrubbing”. Scrubbing is when the user has clicked the progress bar handle and is dragging it along the progress bar. -
Is seeking
Indicates whether or not the player is in the “seeking” state. -
All element Id’s
Contains a list of all VideoJS element Id’s on the page. You can use this to further manipulate the player through JS if you wanted, such as running JS scripts like: “videojs.players.<element_id>.pause()” for example. -
Mouse (X) coordinates
Shows the mouse X coordinates when the player is clicked. -
Mouse (Y) coordinates
Shows the mouse Y coordinates when the player is clicked. -
Subtitles
Shows the loaded subtitle file. -
Media type
Shows either video, audio or image. -
Element Id
Contains this player’s element Id. -
Aspect ratio
Shows the current aspect ratio. -
Loading time events
Shows Yes when the action ‘Trigger time event (list)’ is running and No when it has completed. -
Is fullscreen
Indicates whether or not the player is in full screen mode. -
Browser user agent
Contains the browser user agent.
Video Thumbnails (the complicated part, sorry!)
These are rendered images of scenes at specific time intervals of the video. This plugin accepts a single sprite image which can be created using this tool I’ve put together - Generate thumbnail sprite
Unfortunately, because this Pen is using FFMPEG, I can’t get it included within the plugin itself, although I have tried but it didn’t work without errors which is shame because I would have loved to automate the process for you but for now, you’ll just have to use this tool instead!
You need to pay attention to line 34 in the JS section which reads:
await ffmpeg.run('-ss', '00:00:10', '-i', name, '-vf', 'fps=1/10, scale=160:90, tile=10x10', 'sprite.jpg');
For most, you won’t need to modify this at all. I’ve made it fairly generic but depending on the duration (full length) of the video, it may need to be tweaked. I estimate up to about 20mins of playback might be the limit before it needs some modification. You’ll probably just want to change the 1/10 part of it to something like 1/15.
Explanation of what this does:
-ss 00:00:10 : Seeks to 10 seconds into the playback before anything is done.
-i name : The filename which you uploaded (no need to modify this).
-vf fps=1/10, scale=160:90, tile=10x10 : Filters which is telling ffmpeg to take a snapshot every 10 secs, setting the image dimensions to 160x90 and generating a tiled set of images (grid) 10x10 which can take up to 100 images.
sprite.jpg : Name of the output file which you will get prompted for download.
After you’ve uploaded your video, it’ll take a minute (depending on the size) then give you a download of the generated image file. You can then use this as part of the ‘load thumbnails action’ input.
When you use this action, make sure the settings are the same as what you used above. This will enable the player to accurately display the thumbnails at the correct scrubbing times.
If anyone knows of an easier way to do this, I’d be very interested!
You can see this in action in the demo on the transcription page.
Paul
