Forum Academy Marketplace Showcase Pricing Features

New Plugin - Universal Video Player

Hi, folks.

We published a new plugin that helps you to play any video, audio, or image format.
You can upload files, and use dynamic links or playlist.

This player is robust, easy to use, lightweight, and fully customizable.

Please check out the demo app for more information.

Plugin: Universal Video Player Plugin | Bubble
Editor: Plugin-protos | Bubble Editor
Demo: http://plugin-protos.bubbleapps.io/version-test/universal-player

Supported Formats:

  • All Standard HTML5 videos
  • Youtube, Vimeo
  • HLS, DASH( even where they’re not natively supported.)
  • Audios: aac, m3u, wav, flac…
  • Images: bmp, png, jpg, jpeg, svg, gif…

Features:

  • Playlist support - Instead of specifying one video to play, you can add a playlist so that multiple videos can be played in a row.

  • Auto Play - You can have the video automatically start playing when the video source loads.(Video.js Guides)

  • Loop - You can have the Video automatically loop and start playing again when the Video has ended

  • Mute / Unmute - You can see the mute/unmute mode automatically by specifying the dynamic field of the player element.

  • Controls - Toggle the controls by the dynamic field.

  • Support Fluid mode

  • Aspect Ratio - You can set the aspect ratio of the player and the height will be adjusted accordingly coordinating with other bubble elements.(doesn’t affect other elements, it doesn’t overlap on other elements at all).

  • Support PIP mode

  • Seek Ability

  • Support Full screen mode

  • Dynamic volume change by states & fields.

  • Dynamic playback rate change by states & fields

  • Forward/Rewind video - you can forward/rewind the video by any specified amount of duration.

  • Add text tracks and switch between them.

  • Add audio tracks and switch between them.

  • Add video tracks and switch between them(beta).

  • Predefined themes and custom themes

  • Apply Videojs Plugins

Videojs Plugins:

  • Mobile UI - Touch Control(Forward/rewind by tapping), Full screen control on mobile.

  • Seek Button - Plugin for video.js to add seek buttons to the control bar. These buttons allow the user to skip forward or back by a configured number of seconds.

  • Source Selector - VideoJS plugin that leverages videojs-contrib-quality-levels plugin to offer manual user-selectable level selection options for adaptive http streams.

  • Hotkeys - A plugin for Video.js that enables keyboard hotkeys when the player has focus.

  • Social Sharing - Allows user to copy video url / embed code and share video to social networks.

  • Download Video - Allows users to download the video(not for youtube and vimeo)

  • AirPlay - Allows users to cast the video through airplay(only works on ios and mac, airplay button will be visible only when there are available devices.)

Actions:

  • Play video - Attempt to begin playback at the first opportunity.

  • Pause video - Pause the video playback

  • Play first Video - Play the first media in the playlist.

Play last video - Play the last media in the playlist.

  • Play previous video - Play the previous video of the current video in the playlist.(if it’s the first video, it attempts to play the last video).

  • Play next video - Play the next video of the current video in the playlist(if it’s the last video, it goes to the first item).

  • Seek - Get or set the current time (in seconds)

  • Full screen mode - Enter the full screen mode.

  • Toggle Picture in Picture - Create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device. (Not working for youtube and vimeo).

  • Forward video - forward the video by specified seconds.

  • Rewind video - rewind the video by specified seconds

  • Add Audio Track - Add an AudioTrack to the media.

  • Remove Audio Track - Remove an audio track chosen by track ID.

  • Add text track - You can add text tracks by specifying remote track files or raw content.

  • Remove text track - You can delete a track by its track ID.

Some of the exposed States:

  • Index - The index of the current playing media in the playlist.

  • Last Added audio Track ID - The audio Track ID you added for the last time.

  • Last Added text Track ID - The text Track ID you added for the last time.

  • Last Added video Track ID - The video Track ID you added for the last time.

  • Audio Track IDs - An array of the audio track IDs.

  • Video Track IDs - An array of the video track IDs.

  • Text Track IDs - An array of the text track IDs.

  • Active Audio Track ID - The audio track ID you enabled.

  • Active Text Track ID - The text track ID you enabled.

  • Active Video Track ID - The video track ID you enabled.

  • Player Width - The computed width of the player element.

  • Player Height - The computed height of the component’s element.

  • Video Width - The intrinsic width of the media.

  • Video Height - The intrinsic height of the media.

Some of the defined Events:

  • A Universal Video Player Loaded Metadata - Fires when the browser has loaded meta data for the audio/video.

  • A Universal Video Player Stalled - Fires when the browser is trying to get media data, but data is not available.

  • A Universal Video Player Canplay - The media has a readyState of HAVE_FUTURE_DATA or greater.

  • A Universal Video Player Canplaythrough - The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the entire media file can be played without buffering.

  • A Universal Video Player Waiting - A readyState change on the DOM element has caused playback to stop.

  • A Universal Video Player Seeked - Fired when the player has finished jumping to a new time.

  • A Universal Video Player Seeking - Fired whenever the player is jumping to a new time.

  • A Universal Video Player Playerresize - Called when the player size has changed.

  • A Universal Video Player Changed Volume - Fires when the volume has been changed.

  • A Universal Video Player Changed Playbackrate - Fires when the playing speed of the audio/video is changed.

  • A Universal Video Player Added A New Audio Track - Fires when you added A New Audio Track.

  • A Universal Video Player Added A New Video Track - Fires when you added A New Video Track.

  • A Universal Video Player Text Track Added - Fires when you added A New Text Track.

  • A Universal Video Player Removed Text Track - Fires when you removed a text track.

  • A Universal Video Player Removed A Video Track - Fires when you removed a video track.

  • A Universal Video Player Removed An Audio Track - Fires when you removed an audio track.

Any feedback would be greatly appreciated.

2 Likes