Installing the Plyr player
Download the Plyr :
Connecting CSS
file from your site:
| 1 | rel=”stylesheet” href=”/path/to/plyr.css” /> |
Or from the developer's website:
| 1 | rel=”stylesheet” href=”https://cdn.plyr.io/3.5.6/plyr.css” /> |
Connecting JS
file and initialize:
| 1 2 3 4 | src="path/to/plyr.js"> const player = new Plyr('#player'); |
Like a CSS file, JS can be connected from the developer’s website:
| 1 | src=”https://cdn.plyr.io/3.5.6/plyr.js”> |
By default, the icons used in Plyr controls are loaded from the SVG sprite found at: https://cdn.plyr.io/3.5.6/plyr.svg
To connect multiple players use:
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
or
const players = Plyr.setup('.js-player');
Both options will return an array in the order they appear in the document.
1.VideoJS
VideoJS is a free, open source, responsive video player that is capable of using Flash or other online video playback technology (such as Silverlight).
The player includes basic playback functionality: automatic start and preloading. It also uses JavaScript to provide cross-browser compatibility.
This is the best free video player for publishing videos. It is also implemented as a plugin for WordPress.
Peculiarities:
- Template engine – built on the basis of HTML and CSS. You can also use the cover designer.
- Plugins – This video player supports several plugins and advanced formats such as HLS and DASH. A list of plugins is available on this page.
With the help of plugins, the player can be significantly improved. Some extensions for this player:
- Analytics – allows you to monitor Google Analytics events in the video.js player.
- Playlist – implements support for playlists in video.js.
- Brand – adds a logo to the player control panel.
- Chromecast support.
Settings
Second constructor argument for settings, for example:
| 1 2 3 | const player = new Plyr('#player', { title: 'Title', }); |
Settings parameters can also be passed in the data-plyr-config attribute:
| 1 | src="/path/to/video.mp4″ id="player" controls data-plyr-config='{ "title": "Title" }'> |
List of settings:
| Setting and its type | Default | Description |
| enabled Boolean type | true | Completely disabling Plyr |
| debug Boolean type | false | Displaying debugging information in the console |
| controls Array, function or element | ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'] | Player controls. More details: controls.md |
| settings Array | ['captions', 'quality', 'speed', 'loop'] | If you are using standard controls, you can specify which settings appear in the menu |
| i18n Object | More details defaults.js | Used to internationalize (i18n) text in the user interface. |
| loadSprite Boolean type | true | Load sprite from iconUrl setting. If false, then it is assumed that the sprite loading is processed independently. |
| iconUrl String | NULL | URL or path to the SVG sprite. |
| iconPrefix String | plyr | Identifier prefix for icons used in standard controls (for example, "plyr-play" would be "plyr"). This is necessary to prevent conflicts if you are using your own SVG sprite, but with default controls. |
| blankVideo String | https://cdn.plyr.io/static/blank.mp4 | The URL or path to an empty video file that is used to properly cancel network requests. |
| autoplay Boolean type | false | Autostart on boot. If the autoplay attribute is present on the or element, it will be automatically set to true. Autoplay is not recommended and is disabled in many browsers as it is seen as a negative thing. |
| autopause Boolean | true | Allows only one player to play at a time. Applicable only for Vimeo |
| seekTime Number | 10 | Time in seconds to move when the user presses forward or rewind. |
| volume Number | 1 | A number, from 0 to 1, representing the initial sound level. |
| muted Boolean type | false | Start playback muted. If the muted attribute is present on the or element, it will be automatically set to true. |
| clickToPlay Boolean type | true | Is it necessary to click on the video container to toggle play/pause. |
| disableContextMenu Boolean | true | Disables the right mouse button on the video container. |
| hideControls Boolean type | true | Hides video controls automatically after 2 seconds without mouse movement |
| resetOnEnd Boolean | false | Reset playback to start after it ends. |
| keyboard Object | { focused: true, global: false } | Allows hotkeys |
| tooltips Object | { controls: false, seek: true } | controls: Display control tooltips on mouseover |
| duration Number | NULL | Arbitrary duration of the media file. |
| displayDuration Boolean | true | Displays the duration of audio or video |
| invertTime Boolean type | true | Displays the current time as a countdown rather than an incremental counter. |
| toggleInvert Boolean type | true | Allows users to press to switch the current time type (countdown or countdown). |
| listeners Object | NULL | Allows you to bind event listeners to controls before default handlers. |
| captions Object | { active: false, language: 'auto', update: false } | Settings for subtitles. active - toggles if subtitles should be active by default language - sets the default language for loading (if available). 'auto' uses the browser language. update - listens for changes in tracks and update menu. This is necessary for some streaming libraries, but may result in unselectable language settings). Example subtitle file |
| fullscreen Object | { enabled: true, fallback: true, iosNative: false } | Setting for full-screen viewing enabled - switching to full-screen mode must be enabled. fallback - allows returning to full screen view (true/false/'force'). iosNative - Use iOS's native full-screen mode when entering it (without custom controls) |
| ratio String | NULL | Force aspect ratio for all video formats: 'w:h': '16:9′ or '4:3'. If not specified, HTML5 and Vimeo default to native video resolution. Since sizes are not available through the YouTube SDK, 16:9 is forced by default. |
| storage Object | { enabled: true, key: 'plyr' } | enabled - allows the use of local storage to store user settings. key - name of the key to use. |
| speed Object | { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] } | Playback speed selected - default playback speed. options — Options to display in the menu. Most browsers will refuse to play slower than 0.5. |
| quality Object | { default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] } | Video quality default The default quality level (if it exists in your sources). options options to display. |
| loop Object | { active: false } | active - loops the current video. If the loop attribute is present in the or element, it will be automatically set to true |
| ads Object | { enabled: false, publisherId: " } | enabled - turns on advertising. publisherId: Unique vi.ai ID of the publisher. |
| urls Object | See sources. | Overriding any API URLs, |
| vimeo Object | { byline: false, portrait: false, title: false, speed: true, transparent: false } | See Vimeo options. Some of them are installed automatically based on other configuration parameters, namely: loop, autoplay, muted, gesture, playsinline |
| youtube Object | { noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 } | See YouTube options. Some of them are installed automatically based on other configuration parameters, namely: autoplay, hl, controls, disablekb, playsinline, cc_load_policy, cc_lang_pref, widget_referrer |
| previewThumbnails Object | { enabled: false, src: " } | enabled - Enables thumbnail previews (they must be generated). src - must be either a string or an array of strings representing URLs for VTT files that contain image addresses. Example VTT file
|
Support for HTML5 video codecs in various browsers
For completeness of information, it is worth giving the following table:
| Browser | Google Chrome | Mozilla Firefox | Safari | Opera | Internet Explorer |
| WebM | Eat | Eat | No | Eat | No |
| H.264 | Eat | No | Eat | No | Eat |
| ogg/theora | Eat | Eat | No | Eat | No |
As you can see, there is no universal format that would allow video playback in all browsers. This situation is solved in the following way: a video file in several formats is uploaded to the server, and then several codecs are specified in the video . It looks something like this:
Your browser does not support the video tag.
Thus, the video source will be loaded automatically by the browser if a suitable codec is available.
Hotkeys
| Key | Action |
from 0 to 9 | Move the viewing slider from 0 to 90% resp. |
Space | Stop or continue playback |
K | Stop or continue playback |
← | Jump back for a specified number of seconds (seekTime setting) |
→ | Jump forward for a specified number of seconds (seekTime setting) |
↑ | Turn up the sound |
↓ | Turn down the sound |
M | Mute or unmute sound |
F | Open or close full screen mode |
C | Turn subtitles on and off |
L | Turn loop playback on and off |
2.JW Player
JW Player supports HTML5 video playback and offers a large number of tools from analytics to accessibility settings. As well as a set of video control buttons in HTML5. This is the best player for the site. It can also be used in WordPress and as an alternative to the YouTube video player.
Tools: JW Player offers a wide range of tools available through extensions. The player has extensive customization options for operating modes and appearance, as well as a built-in API.
JW Player plugins are also available for most popular CMSs.
Plugins and components
| Type | Author | Link |
WordPress | Brandon Lavigne (@drrobotnik) | https://wordpress.org/plugins/plyr/ |
Angular | Simon Bobrov (@smnbbrv) | https://github.com/smnbbrv/ngx-plyr |
React | Jose Miguel Bejarano (@xDae) | https://github.com/xDae/react-plyr |
Vue | Gabe Dunn (@redxtech) | https://github.com/redxtech/vue-plyr |
Neos | Jon Uhlmann (@jonnitto) | https://packagist.org/packages/jonnitto/plyr |
Kirby | Dominik Pschenitschni (@dpschen) | https://github.com/dpschen/kirby-plyrtag |
Elite
Adaptive, customizable player for WordPress with support for advertising formats and playback of videos from YouTube, Vimeo and Google Drive.
Peculiarities:
- Easy to install.
- Supports YouTube and Vimeo playlists/channels.
- YouTube 360 VR support.
- Live streaming support (HLS .m3u8)
- Uploading videos to Google Drive.
- Several advertising formats: pre-roll (before the video), mid-roll (in the middle), post-roll (after), pop-up advertising.
- Supports Jpg, Png, gif image formats.
Elmedia
Elmedia is a player for Mac OS that plays all types of videos in the player itself, including online. You will be able to watch videos from Vimeo, Dailymotion, Facebook, etc. And also download videos from these sites.
Peculiarities:
- Support for hardware acceleration.
- You can watch videos from YouTube, Vimeo, Dailymotion without opening your browser.
- SWF support (in PRO version).
- Taking screenshots from videos.
- Uploading videos (in PRO version).
- Option to extract audio from video.
Ultimate
10 Best Tools to Analyze Competitor Backlinks in 2018
Adaptive video/audio player with the function of playing videos from YouTube or Vimeo. It only supports mp4/mp3 formats and works on mobile and desktop devices. This is a paid player and you can purchase it here.
Peculiarities:
- Video URL encryption, which allows you to hide the source address from users.
- Adaptability.
- Supports multiple video quality options.
- Private/password protected videos.
- HLS/m3u8 video support.
- Supports panoramic video and VR.
- Function for distributing videos on social networks.
- Possibility to add a company logo as a watermark.
- Video download option.
