HTML5 Video Player

Demo to preview the plugin:

Introduction

This HTML5 based Video Player can be used to play any video format that HTML5 supports. You can upload your own Static File or use a Dynamic Link as the Video Source.
Notable Features:
  • Floating Video - When a user scrolls past the video, a "floating" video can stick to the side of the screen so that the video can continue to be watched as the user scrolls.
  • Playlist Support - Instead of just specifying 1 Video to play, you can provide a Playlist so that multiple videos can be played in a row
  • Disable Right Clicking - Disable right clicking on the video so that it is more difficult to download/save the video from the webpage.
  • Disable Auto-Fullscreen - On many mobile devices, when a video starts playing it will default it to Full Screen mode. Using this video player, you can disable that and let the video play within the web page instead.
  • Auto Play - You can have the video automatically start playing when the video source loads. NOTE: Some browsers disallow this functionality unless the video is muted.
  • Hide Native HTML5 Video Controls - You can hide the default Video controls so that you can use your own buttons to control the video.
  • Looping Video - You can have the Video automatically loop and start playing again when the Video has ended.
  • Thumbnail Image - You can have a custom image display as the "Thumbnail" of the Video before the Video starts playing.

How to setup

The plugin comes with 1 visual element which can be used for video playback by configuring them accordingly - HTML5 Video Player
let's see how to configure the element:
  1. Place the plugin element on the page
    1. Image without caption
  1. Specify video source. We can specify a list from the database or just a link to the video.
Image without caption
Image without caption
  1. The simplest setup is complete

Plugin Element Properties

Now let's take a look at all the video player settings.
Image without caption
Image without caption
Image without caption
Fields:
Title
Description
Type
Video Source
The Video file to use. You can either upload a static video or provide a dynamic link. If you place a Video List in the "Video Playlist Source" field, the value in this field will be ignored.
File
Video Playlist Source
You can place a list of videos here to simulate a Playlist of videos. When one video finishes, the Video Player will automatically start playing the next video in the list.
File (list)
Thumbnail Image
The background/poster image that will show in the Video Player until the Play button is pressed. It can be used as a Video Thumbnail before the Video starts playing.
Image
Auto Play
If the video If checked, the video will automatically start playing after downloading. Some browsers do not support this feature if the "mute" checkbox is unchecked. Additionally, the "Disable Auto-Fullscreen" option should be checked for AutoPlay to work on some mobile devices.should automatically start playing once it loads. Some browsers won't allow this functionality unless the "muted" field is set to True. Also need to be set "Disable Auto-Fullscreen" to true for autoplay to work for some mobile devices.
Checkbox
Looped
If the video will start playing again automatically after the video finishes.
Checkbox
Disable Auto-Fullscreen
On some Mobile devices, such as iPhones, when a video starts playing it automatically enters full screen mode. This field is to disable that.
Checkbox
Hide Native Video Controls
Hide the native video controls such as Play, Pause, Volume, etc.
Checkbox
Stretch Video To Fill Element
If the Video Player Element size is bigger than the video, this is to automatically stretch the video to fit the element size.
Checkbox
Crop Video To Fit
If the Video's dimensions don't match the dimensions of the Video Player Element, this will crop the video to have it fit better inside of the Video Player Element. One common use of this would be if the Video was recorded vertically on a cell phone but you want to crop it to fit inside of a square Video Player Element.
Yes/No
Fit Video Width To Window Witdh
Makes the Video width match the width of the Browser Window. It also keeps the height proportional to the correct video size. This is supported by most modern browsers, but older browsers might not support this feature.
Yes/No
Muted
If the Video should be muted by default.
Checkbox
Disable Right Click Menu
Disable the ability to right click on the video and see the Context Menu options
Checkbox
Toggle Play/Pause on Click In Chrome
When you click on the playing Video, it will toggle the Play/Pause state
Checkbox
Start Video At
The position in seconds to start the video at after it loads
Number
Remove Fullscreen Button In Chrome
Remove the Fullscreen button in Google Chrome
Checkbox
Remove Download Button in Chrome
Remove the Download button in Google Chrome
Checkbox
Dynamic Width
This field is used to dynamically control the width of the video player. You may want to also use the "Stretch Video To Fill Element" feature to make sure the Video expands to match the Video Player size. This field only takes effect when the value is greater than 0.
Number
Dynamic Height
This field is used to dynamically control the height of the video player. You may want to also use the "Stretch Video To Fill Element" feature to make sure the Video expands to match the Video Player size. This field only takes effect when the value is greater than 0.
Number
Floating Video Position
When you scroll down below a video, you can have the video stick to a part of the screen so that the use can keep watching the video as they scroll. These options are the parts of the screen you can "stick" the video to. You can also move the video in relation to one of these Positions by using the "Floating Video Padding" fields below.
Dropdown
Floating Video Width (px)
The width of the video when it's in the "Floating Video" state
Number
Floating Video Height (px)
The height of the video when it's in the "Floating Video" state
Number
Floating Video Horizontal Padding
The padded distance from the Position set in the "Floating Video Position" field. For example, if you chose "Bottom Right" for the Position, then this field would be the distance from the right side of the page.
Number
Floating Video Vertical Padding
The padded distance from the Position set in the "Floating Video Position" field. For example, if you chose "Bottom Right" for the Position, then this field would be the distance from the bottom of the page.
Number
Floating Video Close Button Image
Image to use for the Button that appears on the Floating Video Player to close/hide the Floating Video.
Image
Floating Video Close Button Width
The Width to use for the Image that is used for closing the Floating Video Player.
Number
Floating Video Close Button Height
The Height to use for the Image that is used for closing the Floating Video Player.
Number

Element Actions

Now we'll learn how to work with each action:

Set Playback Position

Play

Pause

Set Volume

Toggle Mute

Set Playback Speed

Toggle Play/Pause

Enter Fullscreen

Next Video In the Playlist

Previous Video In Playlist

Go To Video In Playlist

Exit Fullscreen

Mute

Unmute

Exposed states

Name
Description
Type
isPlaying
Is yes if the video is playing
Yes/No
isPaused
Is yes if the video is pausing
Yes/No
Playback Position
The current Playback Position of the Video in ms
Number
Video Length
The length of the Video in seconds
Number
Current Video Number In Playlist
The current number of the Video in the Playlist. For example, if it's the 3rd video in the playlist this value would be 3.
Number

Element Events

Name
Description
Video Ended
Triggers when the video playback has ended
Started To Play
Triggers when the video starts playing after having been paused or stopped for buffering
Paused
Triggers when the video is paused
Seek Operation Completed
Triggers when the user is finished skipping to a new position in the video
Seek Operation Begins
Triggers when the user starts skipping to a new position in the video
Playback Position Updated
Triggers when the playback position of the video has changed
Volume Changed
Triggers when the volume of the video has changed
Media Loaded
Triggers when the browser has finished loading the current frame of the video
Media Loading Started
Triggers when the browser has started loading the video
Playlist Finished
Triggers when the last video of the playlist finishes playing.
Is Hovered
Triggers when video element is hover
Isn't Hovered
Triggers when video element is’n hover


Workflow example

Playlist setup

Changelogs

Update: 12.02.20 – Version 2.4.0

  • Added "Playlist Finished" Event

Update: 13.02.20 – Version 2.5.0

  • Added "Exit Fullscreen" Action

Update: 21.05.20 – Version 2.5.1

  • Support larger file sizes to be uploaded

Update: 02.07.20 – Version 2.06.0

  • Added support for Cropping Video to Fit Element Size

Update: 20.07.20 – Version 2.07.0

  • Made Thumbnail Image be a Dynamic Value

Update: 06.03.21 – Version 2.08.0

  • Added "Start Video At" field

Update: 02.04.23 – Version 2.09.0

  • Made "Fit Width to Window Size" feature a dynamic value

Update: 05.04.23 – Version 2.10.0

  • Added Dynamic Width and Dynamic Height fields

Update: 11.05.23 – Version 2.10.1

  • Fixed Playlist Ended Event

Update: 08.07.23 – Version 2.10.2

  • Upgraded to the latest version of Bubble API

Update: 01.03.24 – Version 2.13.0

  • Added “Is Hovered”, and “Isn’t Hovered” events. Fixed element height and “Fit Video Width To Window” field

Update: 09.05.24 – Version 2.14.0

  • New width & height fields

Update: 19.06.24 – Version 2.16.0

  • Minor update

Update: 23.07.24 – Version 2.17.0

  • Minor update

Update: 09.08.24 – Version 2.18.0

  • Fixed thumbnail auto-generated for iPhone

Update: 10.09.24 – Version 2.19.0

  • Fixed video flickering on page load

Update: 26.09.24 – Version 2.20.0

  • Bug fixes

Update: 10.10.24 – Version 2.21.0

  • Fixed player in Safari