在前端开发中，我们常常会需要播放媒体文件，如音频和视频。而 plyr-extended 包就提供了一套简单易用且高度可定制化的媒体播放器。
在本文中，我们将深入探讨如何使用 plyr-extended 包，并通过示例代码演示其使用。
安装 plyr-extended
plyr-extended 是使用 npm 包管理工具进行安装的，通过以下命令进行安装：
npm install plyr-extended
安装好之后，可以在项目中引入并使用它。
配置 plyr-extended
为了使用 plyr-extended，我们需要在项目中引入 plyr 库和 CSS 文件。你可以在 <head> 元素中加入以下代码段：
<head> <link rel="stylesheet" href="path/to/plyr.css"> <script src="path/to/plyr.js"></script> <script src="path/to/plyr-extended.js"></script> </head>
在引入 plyr-extended 之后，我们需要对其进行一些配置。在这个例子中，我们将使用 plyr-extended 播放 MP4 格式的视频文件。
-- -------------------- ---- -------
-- --------
------ - -- ---- ---- -------
------ ---------------------
------ - -- ------------ ---- ----------------
-- -- -------------
----- ------ - --- ----------------------- -
--------- -
-------------
-------
-----------
---------------
-------
---------
-----------
-----------
------
----------
--
------ -
------- ------
--------- ------
------ ------
--
---
-- -- ------------- - ----
------------------ -- -- -
----- ---------------- - -- -- -
-- -------------------------- -
------------------------
- ---- -
--------------------------
-
--
----------------------------- -- -- -
-------------------------- --------------------------
---
----------------------- ----- -- -
-- ---------- --- ---- -
-------------------
-
---
---在上述代码中，我们使用了配置对象 controls，用来指定我们要显示哪些自定义控件。
另外，我们还设置了 vimeo 对象，为所有 Vimeo 视频指定自定义标题、肖像和标题。
每个控件都有默认样式，但是你可以通过在更上层的容器中添加类名，覆盖这些默认样式。例如，我们可以添加一个 .yourskin 类名，并将所有的样式定义为该类的子类。
在 HTML 中使用 plyr-extended
实际上，我们可以通过增加 data-plyr-provider 和 data-plyr-embed-id 属性，使用 plyr-extended 播放来自 Youtube、Vimeo 和 Dailymotion 的媒体流。 这些媒体流可以是单个视频或者媒体流的列表。可以将 autoplay、loop 等自定义控件添加到播放器中。
以下是一个 HTML 文件使用 plyr-extended 播放视频的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------
------- -------------------------------
------- ----------------------------------------
-------
------
---- ------------ ------------
----
----------------------------
--------------------------------
-------
------
--------
----- ------ - --- ------------------------
------------------ -- -- -
------------------- --------
---
---------
-------
-------总结
在本文中，我们讨论了如何使用 plyr-extended 包来对媒体进行播放，并演示了如何配置和使用这个包。通过本文可以学习到如何在项目中使用这个媒体播放器，并了解到如何自定义这个播放器。
plyr-extended 是一个顶级的媒体播放器，提供了非常强大和灵活的功能。希望这篇文章能帮助读者更好地理解并使用这个包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e3991
