什么是 vplyr？
vplyr 是一个基于 Plyr.js 开发的 Vue.js 视频播放器组件。使用 vplyr 可以轻松地实现视频播放器的功能，并且支持各种视频格式和自定义样式。
安装 vplyr
在使用 vplyr 之前，需要先安装。打开终端并输入以下命令即可安装：
npm install vplyr
使用 vplyr
安装完成后，在需要使用的 Vue 单文件组件（.vue 文件）中，先引入 vplyr：
import Vplyr from 'vplyr'
然后在 Vue 模板中使用以下代码即可：
-- -------------------- ---- -------
----------
-----
------ ------------------ ---------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
--------- -----
--------- -------- ----------- ------- --------- --------------
----------- - -------- ---- --
------ ------
--
-------- -
-
---- -------------------------------------------------------------------------
----- -----------
-
-
-
--
----------- - ----- -
-
---------以上代码中，options 和 sources 是必要的属性。其中 options 中的 autoplay 表示自动播放、controls 表示控制按钮、fullscreen 表示全屏，ratio 表示播放器的宽高比例。sources 中的 src 表示视频的链接、type 表示视频格式。
自定义样式
vplyr 支持自定义样式。在需要自定义样式的 Vue 单文件组件中，先引入样式文件：
@import 'vplyr/dist/vplyr.css';
然后在 Vue 模板中使用以下代码即可：
-- -------------------- ---- -------
----------
-----
------ ------------------ ------------------ --------------------------
------
-----------
--------
------ ----- ---- -------
------ ----------------------
------ ------- -
------ -
------ -
-------- -
--------- -----
--------- -------- ----------- ------- --------- --------------
----------- - -------- ---- --
------ ------
--
-------- -
-
---- -------------------------------------------------------------------------
----- -----------
-
-
-
--
----------- - ----- -
-
---------
-------
---------- --------------- -
----------- -----
-
---------- ----------------- -
------ ------
------------- ------
-
---------- ------------------------ -
----------- ------- -- -- -----
-
--------在上面的代码中，我们为播放器添加了一个类名 my-player，并且在样式中针对这个类名添加了自定义样式。
总结
通过本教程，我们了解了如何使用 vplyr 实现视频播放器，并且学会了如何自定义样式。vplyr 是一个非常好用的 Vue.js 视频播放器组件，可以帮助我们快速实现和定制化自己所需的播放器。希望本教程对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8e81e8991b448d9341