Html5 Video Player Docs

  1. Home
  2. Docs
  3. Html5 Video Player Docs
  4. Guides
  5. ShortCode

ShortCode

Gutenberg

Add video player from Html5 Video Player > Add New Player. You will see the player in the Gutenberg editor.

First, select a video type: Video, Youtube, or Vimeo. For Video upload Video or insert Video URL, for Youtube insert Youtube video URL, for Vimeo insert Vimeo video URL.

HTML5 Video Player- Gutenberg ShortCode Choose Video Type
HTML5 Video Player- Gutenberg ShortCode Choose Video Type

Sidebar settings

Select the block, you will see the settings option in the right sidebar. There are three options, Settings, Controls, and Style.

HTML5 Video Player- Gutenberg ShortCode Sidebar Settings
HTML5 Video Player- Gutenberg ShortCode Sidebar Settings

Settings

Sources: You can set video and poster, and also can set the download URL by enabling the Custom Download URL option.

Options: Enable or disable Repeat, Autoplay, Muted, Sticky On Scroll, Pause, Reset On End, Auto Hide Control, Show or hide thumbnail on pause. And set Seek Time, Start Time, Preload, Password Protected, and Google VAST Tag URL.

HTML5 Video Player- Gutenberg ShortCode Settings
HTML5 Video Player- Gutenberg ShortCode Settings

Chapters

Set different chapters for the video from here.

HTML5 Video Player- Gutenberg ShortCode Chapters
HTML5 Video Player- Gutenberg ShortCode Chapters

Overlay

Add branding logo or text on video overlay. Also, set the position of overlay content.

HTML5 Video Player- Gutenberg ShortCode Overlay
HTML5 Video Player- Gutenberg ShortCode Overlay

End Screen

By enabling this show text or anchor text after the video ends.

HTML5 Video Player- Gutenberg ShortCode End Screen
HTML5 Video Player- Gutenberg ShortCode End Screen
HTML5 Video Player- Gutenberg ShortCode Streaming & Speed
HTML5 Video Player- Gutenberg ShortCode Streaming & Speed

Popup, Watermark & Additional

Popup: Enable to play video in a popup by clicking a poster or button.

Watermark: Show a watermark when playing like user email, name, or custom text, and color it.

Additional: Add Player ID, and add additional CSS.

HTML5 Video Player- Gutenberg ShortCode Popup, Watermark & Additional
HTML5 Video Player- Gutenberg ShortCode Popup, Watermark & Additional

Controls

Go to the Controls tab beside the Settings tab. From here you can show/hide the video player controls like Play Large, Restart, Rewind, Play, Fast Forward, Progress, Current Time, Duration, Mute, Volume, PIP, Airplay, Settings, Download, and Fullscreen.

HTML5 Video Player- Gutenberg ShortCode Controls
HTML5 Video Player- Gutenberg ShortCode Controls

Style

Go to the Style tab beside the Controls tab to set the width and rounded corner value of the video player.

HTML5 Video Player- Gutenberg ShortCode Style
HTML5 Video Player- Gutenberg ShortCode Style

ShortCode Classic

First, disable Gutenberg Shortcode Generator to enable Classic Editor. After setup, add or edit Player from the Html5 Video Player menu. Here you will find the settings for the player:

After all the settings save the player, copy and paste the shortcode where you want to show the player.

HTML5 Video Player- Classic ShortCode
HTML5 Video Player- Classic ShortCode

ShortCode Classic- Configure

There are various options to configure the video player!

HTML5 Video Player- Classic ShortCode Configure
HTML5 Video Player- Classic ShortCode Configure

Sources

Select a video source: Library or CDN source, YouTube, Vimeo, or from AWS S3 File Manager

Set video and thumbnail sources. Also, set the download URL by enabling the Custom Download URL option if want a custom file download.

HTML5 Video Player- Classic ShortCode Configure Sources
HTML5 Video Player- Classic ShortCode Configure Sources

Streaming

You can stream in the video player.

To stream video from the server, first, you have to enable the streaming option. It supports Hls.js and Dash.js

Paste the streaming source and also add a thumbnail.

HTML5 Video Player- Classic ShortCode Configure Streaming
HTML5 Video Player- Classic ShortCode Configure Streaming

Options

Under the sources you will see the options:

  1. Video Start Time – set a starting time for the video
  2. Enable Thumbnail when video pause – to display the thumbnail when the video is paused.
  3. Enable Popup – enable Popup to open this video as a modal.
  4. Disable Popup – the user can’t pause the video if this option is enabled.
  5. Enabled Sticky Mode – when a visitor will scroll to the bottom and the video is playing, the video will be sticky in the top-right corner.
  6. Repeat – two options are available. Once or Loop. You can choose according to your needs.
  7. Muted – enable if you want the video muted.
  8. Auto Play – enable if you want video will start playing as soon as it is ready. autoplay policy.
  9. Player Width – set the player width. Height will be calculated base on the value. Left blank for Responsive player.
  10. Seek Time – The time, in seconds, to seek when a user hits fast forward or rewind. The default value is 10 Sec.
  11. Auto Hide Control – enable if you want the controls (such as a play/pause button, etc) to hide automatically.
  12. Reset On End – the video will reset to first and show a thumbnail at end of the video.
  13. Preload – specify how the video file should be loaded when the page loads.
HTML5 Video Player- Classic ShortCode Configure Options
HTML5 Video Player- Classic ShortCode Configure Options

Password Protected & Google Vast TagURL

Enable Password Protected and set the password and set text message to the users.

Also, you can set Google Vast TagURL

HTML5 Video Player- Classic ShortCode Configure Password Protected
HTML5 Video Player- Classic ShortCode Configure Password Protected & Google Vast

Video Quality

Set video quality, you have to upload different videos of different video.

HTML5 Video Player- Classic ShortCode Configure Video Quality
HTML5 Video Player- Classic ShortCode Configure Video Quality

Subtitle

Enter language and upload .vtt file for video subtitle.

HTML5 Video Player- Classic ShortCode Configure Subtitle
HTML5 Video Player- Classic ShortCode Configure Subtitle

Caption & Chapters

Enable caption by default. This is an experimental option.

Set different chapters for the video.

HTML5 Video Player- Classic ShortCode Configure Caption & Chapters
HTML5 Video Player- Classic ShortCode Configure Caption & Chapters

ShortCode Classic- Controls, Branding & End Screen

When you edit the player in the classic editor, there are more settings on the right sidebar. There are Controls, Branding, and End Screen options.

HTML5 Video Player- Classic ShortCode Sidebar
HTML5 Video Player- Classic ShortCode Sidebar

Controls

In Controls, you can show/hide the video player controls like Large Play, Restart, Play, Rewind, Fast Forward, Progress, Current Time, Duration, Mute, Volume, Settings, PIP, Airplay, FullScreen, Download, and Controls Shadow.

Branding

From Branding settings, you can add branding logo or text on video overlay. Also, set the position of overlay content.

End Screen

In End Screen settings, by enabling this show text or anchor text after the video ends.

Tags:
Was this article helpful to you?

How can we help?