Demo to preview the settings
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:
- Place the plugin element on the page
- Specify video source. We can specify a list from the database or just a link to the video.
- The simplest setup is complete
Plugin Element Properties
Now let's take a look at all the video player settings.
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 |
Volume | Sets the initial volume level of the video.(0: silent to 100: Loudest) | Number |
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 |
Debug Mode | Trace all the video player events in the javascript console | Yes/No |
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
Sound Up
Sound Down
Toggle Display Controls
Toggle Autoplay
Restart
Seek
Toggle Looping
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 |
Width | The current width of the video player. | Number |
Height | The current height of the video player. | Number |
Volume Level | The current volume level of the video, represented as a percentage number (0 to 100) . | Number |
Controls displayed | Indicates whether the video player's controls are currently visible. | Yes/No |
Autoplay | Shows if the video is set to start playing automatically. | Yes/No |
Error Code | Displays a code representing any error encountered by the video player. | Text |
Error message | Provides a detailed message about any error encountered by the video player. | Text |
Ready State | Readiness state of the video player : 0 No data, 1 Have Metadata, 2 Have current data, 3 Have future data, 4 have enough data. | Number |
Playback Rate | The current speed of video playback (e.g., normal speed is 1.0). | Number |
Seeking | Shows whether the video player is currently seeking to a specific point in the video. | Yes/No |
Loop | Indicates whether the video will automatically restart when it finishes. | Yes/No |
Muted | Shows if the video player is currently muted. | Yes/No |
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 |
Waiting | Triggered when the video player is buffering and waiting for more data to continue playback. |
Muted | Triggered when the video player is muted. |
Unmuted | Triggered when the video player is unmuted. |
Controls Display Changed | Triggered when the visibility of the video player's controls changes. |
Autoplay Changed | Triggered when the autoplay setting of the video player is changed. |
Aborted | Triggered when the video loading is aborted. |
Can Play | Triggered when the video player has enough data to start playing, but it might still need to buffer as playback continues. |
Can Play Through | Triggered when the video player has enough data to play the video all the way through without buffering. |
Duration Changed | Triggered when the duration of the video changes (e.g., when loading a new video). |
Emptied | Triggered when the video player’s content is emptied or reset. |
Metadata Loaded | Triggered when the video player's metadata (e.g., duration, dimensions) is loaded. |
Error | Triggered when an error occurs in the video player. |
Progress | Triggered periodically as the video downloads, indicating the progress of loading data. |
Playback Rate Changed | Triggered when the playback speed of the video changes. |
Stalled | Triggered when the video player unexpectedly stops loading data. |
Suspended | Triggered when the video player stops loading data but has not encountered an error. |
Playing | Triggered when the video starts playing after being paused or buffering. |
Workflow example
Playlist setup
