Forum Academy Marketplace Showcase Pricing Features

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

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.

image

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

This sounds incredibly useful. Thanks for circling back! I will check it out this week. :pray:

1 Like

Hi, Great stuff.

Can this version or a customized version of it allow for live subtitle editing that shows on the video (inputted from a text editor)? Also burning said subtitles into the video?

Would look something like this:

That’s pretty cool but unfortunately it can’t do that right now. I will however look at adding something like, I like the idea of live subtitle editing. Where did that image come from? Is that from some other service or something?

Its from happyscribe.com . veed.io can do the same

I would be willing to pay for a custom plugin that can replicate what they do. If able and interested drop me a private message,

Sure will do. I’ll take a look for you.

1 Like

Hi @phrase9, I’ve added all the Happyscribe API endpoints into the plugin, I think it’s now possible to build something. I’ll attempt to do just that in the demo soon.

1 Like

Hey man thanks for the quick response. But just to be sure as i dont want you to do unnecessary work, does their api allow one to create the same thing or does it just let one send transcriptions to their platform? I may be wrong but I think it is the latter. Veed.io may allow for that though.

No problems and no worries about the extra work, I’ll keep this in anyway as it seems like a nice feature. As far as I can tell, you send a video over to them, they do the transcriptions and you can get all the data back. At that point you can manipulate it, do whatever and go from there. Give me a few days on this, it might not be exactly what you want but I’ll put a demo together anyway and if that’s no good I’ll play with Veed.io also. I’ll PM you in a few days after I completed the work.

1 Like

Cool man. Will catch up with you in a few days. I am trying to do research on open source caption burning software. The actual transcription part of it should be straight forward using a google speech to text plugin but the challenge will be in the converting the text into captions, displaying the captions on the video player, and as an optional extra, burning the captions into the video.

Hi, I’ve been making progress, have just released an update which comes with a couple of actions to add subtitles/captions etc to a video and turn them on/off. I’ve been working on this demo page which you might find interesting.

https://paul-testing-4.bubbleapps.io/version-test/transcription

It allows you to transcribe a video and then get the web VTT file which you can then load into the “add subtitles” action. Timestamps are supported and that so theoretically, if the file could be amended on the fly, like it being loaded into an editor, you could run the action every time it’s updated and the subtitles/captions changes will be reflected straight away. It’s proving tricky to create that but I’ll get there eventually.

Amazing work man. Looks like you really are getting there. I will inbox you in a few days time outlining precisely what I would like to achieve.

No probs and thanks!

Hi @pork1977gm, thanks for this plugin. For some reason I’m not able to play an mp4 file hosted with Dropbox (even though I add the URL parameter “raw=1” as specified by Dropbox). I can play this file with the other videoJS-based plugins, but not yours. Any idea? Here is my test page: testingenvironment | Bubble Editor

I shall look at that, give me a bit and will get back to you.

Ok I’ve fixed it so will release an update a bit later on today.

1 Like

Amazing, thanks a lot!

There’s been a number of updates since putting this together. It’s kind of turned from a video player to an all in one media player really. So it now handles audio and videos files and it can also be used as an image viewer. Animated gifs will play through it, transparent vectors will load up and I’m sure I can make handle more formats if requested.

I had some issues with trying to pause videos when the element was buried inside a repeating group. This is now resolved so whatever media it is playing at that time will be stopped when the element gets made “not visible”, regardless of where it lies on your page.

Just keeping the instructions in this post up to date.

There’s a new action included which allows you to load a series of video ads into whatever main video you have loaded. It only supports MP4 videos at the moment and the action detail pane looks like so…

You control the various labels seen which overlay the player when an Ad is playing

@pork1977gm this is a very useful plugin for my MVP. Our users are creating video’s using Wistia + Soapbox. My only question is there a way when I add Wistia video id from the url to pull engagement stats of the video. For instance Wistia tracks when a video was stopped, played, how many clicks etc. On my platform we want to be able to show each user engagement on their video. This is Wistia’s API that tracks engagement.

GET https://api.wistia.com/v1/stats/medias/[media-id].json
1 Like