Plugins
Templates

Plyr - Video Player Plugin

Link to plugin page: https://zeroqode.com/plugin/plyr---video-player-plugin-1585752713801x567609432761491140

Introduction

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 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 .

Bubble Video

Bubble Video Proprieties
Bubble Video Proprieties (continued)

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, 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:

  1. 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.

    2. Click Inventory and then Ad units.

    3. Locate and click your video ad unit.

    4. Click Generate tags.

    5. Complete the 3-step process and click Continue after each step (Tag type, Tag Options, and Tag Results)

    6. 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 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 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

In other words, this feature allows to setup Plyr's element responsiveness.

Update: 29/08/2021 - Version: 1.15.0

  • Added the ability to customize control bar color

Demo to preview the settings: