在本教程中，我们将学习Plyr，它有助于创建简单HTML5，YouTube和Vimeo播放器。

单击此处访问Plyr GitHub存储库。

安装

如果安装了Node和NPM，则使用以下命令将Plyr作为依赖项安装。

npm install plyr

或者，从其存储库下载最新版本。

或者，使用CDN。

JavaScript

<script src="https://cdn.plyr.io/2.0.15/plyr.js"></script>

CSS

<link rel="stylesheet" href="https://cdn.plyr.io/2.0.15/plyr.css">

步骤1：加入样式表

在页面中包含Plyr样式表。

<link rel="stylesheet" href="path/to/plyr.css">

步骤2：包含脚本

在页面中包含Plyr脚本。

<script src="path/to/plyr.js"></script>

步骤3：建立标记

在此示例中，我们将使用Plyr展示YouTube视频。

<div id=&apos;plyr-youtube&apos; data-type="youtube" data-video-id="TbsvRyYpcOQ"></div>

步骤4：Plyr设定

现在我们将调用setup()方法并传递该元素的ID。

plyr.setup("#plyr-youtube");

例

在以下示例中，我们使用YouTube视频。

用于HTML5视频的Plyr

在以下示例中，我们将创建一个HTML5视频标签，并包括视频文件。

HTML

<video id="plyr-video" poster="/path/to/video-poster.png" controls>
  <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/video-caption.vtt" srclang="en" default>
</video>

JavaScript

plyr.setup("#plyr-video");

用于HTML5音频的Plyr

在以下示例中，我们将创建一个HTML5音频标签，并包括音频文件。

HTML

<audio id="plyr-audio" controls>
  <source src="/path/to/audio.mp3" type="audio/mp3">
  <source src="/path/to/audio.ogg" type="audio/ogg">
</audio>

JavaScript

plyr.setup("#plyr-audio");

Vimeo的Plyr嵌入

在以下示例中，我们将创建一个div来包含Vimeo视频。

HTML

<div id="plyr-vimeo-example" data-type="vimeo" data-video-id="143418951"></div>

JavaScript

plyr.setup("#plyr-vimeo-example");