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:
- 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 |
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: 01.03.24 – Version 2.13.0
- Added “Is Hovered”, “Isn’t Hovered” events. Fixed element height and “Fit Video Width To Window Witdh” field