如果你想在自己的网站或应用中使用视频播放器，那么 Video.js 是一个很不错的选择。Video.js 官方提供了多种皮肤和插件以供选择。视频播放器完全开源，具有高度的可扩展性，也能够运行在绝大部分的主流浏览器中。在本文中，我们将介绍如何使用 videojs-standard 这个 npm 包来快速地构建一个基于 Video.js 的播放器。
什么是 videojs-standard
videojs-standard 是一个基于 Video.js 的 npm 包。它提供了一个基本的、经过优化的播放器控制面板，可以轻松地使用视频播放器模块化构建出一个优秀的播放器界面。在 Video.js 常规使用的基础上，videojs-standard 通过封装和插件提供了更多的播放器控制面板和控制方法。
安装和使用
安装 videojs-standard 很简单，该 npm 包可以很容易地添加到您的项目中。在项目的根目录下通过终端命令行运行以下代码：
npm install videojs-standard
这样就安装成功了，接下来只需要在您的项目中引入 videojs 和 videojs-standard 依赖即可。
-- -------------------- ---- -------
--------- -----
------
------
----- ------------------------------------------------- ---------------- --
------- ------------------------------------------------------
------- ----------------------------------------------------------------------
-------
------
------ -------------- --------------- --------------------------
--------
--- ------ - -------------------- -
--------- -----
--------- -----
-------- --
---- --------------------
----- -----------
--
---
------------------
---------
-------
-------这样就可以使用默认的控制面板了，位置在视频上方。当然，您也可以拓展更多的 ui 控制模块来强化您的播放器交互体验。
控制面板常用拓展
videojs-standard 提供了一些常用控制面板的拓展插件。在初始化播放器时，可以通过传递一个选项来启用你喜欢的插件。以下是一些常用插件的介绍。
Progress Control
Progress Control 是 Video.js 的默认进度条。它需要有 hls 和 dash 支持，只有当网络资源提供 m3u8 或 mpd 格式的流媒体播放源时才能用。如果不是，则需要手动加载。
-- -------------------- ---- -------
--------- -----
------
------
----- ------------------------------------------------- ---------------- --
------- ------------------------------------------------------
------- ----------------------------------------------------------------------
------- ----------------------------------------------------------------------------
-------
------
------ -------------- --------------- --------------------------
--------
--- ------ - -------------------- -
--------- -----
--------- -----
-------- --
---- ---------------------
----- -----------------------
--
---
------------
------------------------- -----
--------------- -----
-------------------- ----
---
----------------- ---------------- -- ---
---------
-------
-------Slider Control
Slider Control 插件使用自定义控制条取代默认控制条的进度条，具有更佳的体验和 UX。
player.standard({ sliderControl: {} });Big Play Button
Big Play Button 插件是在控制面板上显示一个大型的播放按钮。
player.standard({ bigPlayButton: {} });Poster Image
Poster Image 插件可以在 video 标签的 poster 属性定义的图像后放置一个图片。它可以自动检测 poster 属性。
player.standard({ posterImage: {} });总结
使用 videojs-standard 很容易就能构建一个功能强大但简单易用的视频播放器。本文主要讲解了 videojs-standard 的安装和基本调用方法，并介绍了一些常用的 UI 拓展插件的使用方法。希望您能够通过我们的使用指南，为您的项目找到更合适的播放器控制界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63257