21,000 Stars! An open source free and powerful video player library

The following article is from Coder of Attack, author Cui Qingcai

Recently, I was developing a front-end project and used the function of playing video, so I checked what front-end video player library can be used, and today I will share it with you.

The name of this library is Plyr. As the name suggests, it is actually the abbreviation of Player. The overall preview effect is as follows:

Official website: https://plyr.io/

The GitHub address is: https://github.com/sampotts/plyr

Looking around, I found that this library is not only beautiful and elegant, but also very functional.

Let's take a look at some of its built-in features.

General overview

First, let's take a look at what functions it supports. We can open its official Demo website and play a video directly to view the effect, as shown in the figure:

The overall look is very good. It looks much better than the native player that comes with the browser. The UI of various control bars is very beautiful.

Then let's see what functions it has.

Not to mention the progress bar and volume control.

Then look at what else is on the right, the first one is the subtitle control:

Here you can turn on or off subtitles by clicking, that is to say, this player supports us to embed subtitle files.

It also supports many settings, such as resolution control, playback speed control:

The playback speed control also supports various custom speeds, such as 1.25 times, 4 times, etc.:

In addition, it also supports video picture-in-picture mode playback, just click the pop-up button:

Overall, the demo on this official website is enough to make me choose it!

Detailed function

But the functions are definitely more than that. Next, let's go back to the GitHub homepage to see its introduction. Its introduction is as follows:

• 📼 HTML video and audio, YouTube and Vimeo - Supports major formats
• 💪 Accessibility - Full support for VTT subtitles and screen readers
• 🔧 Customizable - We can customize various options to make the player render different UI.
• 😎 Clean HTML - Use correct elements like <input type="range"> for volume and <progress> for progress.
• 📱 responsive - works on any screen size
• 💵 Profit - Make money from your videos
• 📹 Streaming - supports hls.js, Shaka and dash.js streaming
• 🎛 API - Switch playback, volume, search, etc. via standardized API
• 🎤 events - no messing with Vimeo and YouTube APIs, all events are standardized across formats
• 🔎 fullscreen - supports native fullscreen and falls back to "full window" mode
• ⌨️ Shortcuts - Supports keyboard shortcuts
• 🖥 PIP - Support PIP mode
• 📱 Playsinline - supports playsinline attribute
• 🏎 speed control - adjust speed on the fly
• 📖 multiple subtitles - supports multiple subtitle tracks
• 🌎 i18n support - support internationalization of controls
• 👌 preview thumbnail - support showing preview thumbnail
• 🤟 no framework - written in "vanilla" ES6 JavaScript, no jQuery required
• 💁‍♀️ SASS - Included in your build process

It is very powerful!

So how exactly is this used? Let's introduce it again.

use

To use Plyr, you can directly reference Plyr's CDN file by adding the following reference:

<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />

Of course, Plyr also supports direct reference of Node.js projects. The installation method is as follows:

yarn add plyr

Then cite it like this:

import Plyr from 'plyr';

const player = new Plyr('#player');

Plyr has a very strong function, that is, it extends the functions of the Media related tags in native HTML5. For example, we can now add some custom functions to the video tag, such as adding a data-poster attribute as the video preview cover, such as adding A track tag to add subtitle files, written as follows:

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

At the same time, Plyr also supports embedding some external chain websites, such as Youtube and Vimeo (it would be nice if it supports some video websites in China).

If you want to refer to Youtube, you just need to add some classes to the div, such as:

<div class="plyr__video-embed" id="player">
  <iframe
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

style customization

In addition, Plyr also supports us to add some custom styles. We need to use CSS Custom Properties to easily implement style rewriting.

For example, if we want to change the default button color from blue to red, we can add CSS styles directly:

:root {
  --plyr-color-main: red
}

So Plyr can read this CSS property, and then implement style control.

More custom style names can refer to: https://github.com/sampotts/plyr#customizing-the-css .

Configure custom

We also mentioned just now that Plyr supports us to configure some Options options to implement some custom functions, and the functions here are also very comprehensive, such as:*

• settings: is a list, we can control the function list of settings, for example, configure it to ['captions', 'quality', 'speed', 'loop'] to control the subtitle, resolution, speed, loop playback and other controls in the settings function.
• i18n: Can control multilingual configuration.
• blankVideo: If it is an empty video, what to play by default.
• autoplay: Whether to play automatically.

Wait, there are many more, you can refer to https://github.com/sampotts/plyr#options to see more functions, in short, almost everything you can think of.

JavaScript API

In addition, Play also exposes many APIs, such as play, pause, stop, restart and other methods to control playback, pause, stop, replay, etc., and even airplay supports it.

For specific functions, you can refer to https://github.com/sampotts/plyr#methods view.

So I will introduce it here, I hope it will help you~

Open Source Outpost daily shares popular, interesting and practical open source projects. Participate in the maintenance of 100,000+ Star open source technology resource libraries, including: Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET, etc.