Zeroqode Video Player Plugin Plyr's simple, lightweight, accessible and customizable library with HTML5, YouTube, and Vimeo media player that supports modern browsers.
This video player comes with a range of Events, Actions and States to work with out of the box.
Plugin Element proprieties
The plugin comes with 3 visual elements which can be used for video playback by configuring them accordingly.
💡
In Chrome, uncheck “Use hardware acceleration when available” If you’re using the plugin on the new responsive version to avoid video player flicker.
Bubble Video
Proprieties fields:
Video source
Static file : upload a single file via static file
Dynamic link: provide a dynamic link from db or list of files from database
Poster
Static file: upload an image via uploader to set as poster
Dynamic link: provide a dynamic link source to file from database
Enable ads? (NEW!): True / false field which let's you enable or disable ads for your bubble video
VI publisher ID (NEW!): Unique publisher identifier from https://www.vi.ai/VAST URL (NEW!): Unique url tag with parameters for advertising
HLS source (NEW!): Used for HLS Streaming content (m3u8 playlist)
YouTube Video
Proprieties fields:
Video ID: provide an video ID from youtube (ex: EGn-QtxMEPI)
Poster : provide a poster image (either dynamic or static file)
Static file: upload an image via uploader to set as poster
Dynamic link: provide a dynamic link source to file from database
Playsinline (NEW!) : Enable the playsinline attribute
Vimeo Video
Proprieties fields:
Video ID: provide an video ID from vimeo (ex: 480825325)
Poster: provide a poster image (either dynamic or static file)
Static file: upload an image via uploader to set as poster
Dynamic link: provide a dynamic link source to file from database
Installation and Setup
Plugin installation and setup
All you need to do is to install the plugin, drag one of three visual elements of the plugin onto the page, give it a source and you're ready to go.
Once one of the elements is placed on the page, the user immediately gets access to all of the states and events, also actions that control the element itself.
Setting up VAST and vi.ai profiles
For creating a VAST Tag URL you can use:
Google AdManager Account
If you use Google Ad Manager (Google DFP), generating a VAST Tag is pretty straightforward.
1. Sign in to Google Ad Manager.
Click Inventory and then Ad units.
Locate and click your video ad unit.
Click Generate tags.
Complete the 3-step process and click Continue after each step (Tag type, Tag Options, and Tag Results)
Click done.
2. Third-Party Tools
In addition, there are a couple of VAST tag generators (offered by the video players) in the market which can help you generate the template.
If you already have a vast tag, then you can use it in the player. Just paste it into the dedicated field and check the enable ads checkbox
For enabling ads using vi.ai platform
You must create a new account (or use the one created) at https://www.vi.ai/ as an advertiser.
Integrate your content into the VI platform per their instructions and get your publisher ID which can be used in the dedicated field and check the enable ads checkbox.
Paste your publisher ID into the same field in the element properties and check the box.
Plugin Events, Actions and States
Each element of the plugin has the exposed states shown on the screens below. See their Title and Type
Each element of the plugin can trigger events shown on the screenshot below.
And also each element of the plugin has a set of actions available for the user.
Changelogs
Update: 27/11/2020 -
Added the ability to display ads to the bubble video player element from the vi.ai platform and from the VAST URL.
Fixed bugs with elements size
Update: 18/12/2020 -
Added new ability to add the HLS streaming videos for 'Bubble video' plugin element
Update: 28/04/2021 -
Fixed display issues
Update: 24/05/2021
Added new option to stretch player to the parent group
Update: 29/08/2021 - Version: 1.15.0
Added the ability to customize control bar color
Update: 28/09/2021 - Version: 1.16.0
Added custom style settings for the control panel and the playsinline checkbox for iOS
☝
Note: When playsinline checkbox on the plugin video element is checked - the played video is displayed within the frame of the plugin video element, and plugin element states are not available.
When playsinline checkbox is unchecked - the played video is displayed in the fullscreen regime, and plugin element states are available.
Update: 28/10/2021 - Version: 1.17.0
Added the ability to lock the screen in landscape mode
Update: 08/12/2021 - Version: 1.18.0
Minor fix
Update: 20/12/2021 - Version: 1.19.0
Removed Element ID field
Update: 08/04/2022 - Version: 1.20.0
Fixed display of video parameters on IOS
Update: 09/06/2022 - Version: 1.21.0
Updated for new responsive
Update: 11/10/2022 - Version: 1.22.0
Adapted to the new responsive engine
Update 01/12/22 - Version: 1.23.0.
Removed full-screen button on IOS only.
Update 5/12/22 - Version: 1.24.0.
Minor fixes
Update 13/12/22 - Version: 1.25.0
minor fixes
Update 16/12/22 - Version: 1.27.0
minor fixes
Update 27/01/23 - Version: 1.28.0
Added new action "change video id" for youtube and vimeo elements
