在前端开发中，难免会遇到需要处理视频播放的需求。而 video.js 是一个非常流行的 HTML5 视频播放器，具有广泛的社区支持和插件扩展。本文将详细介绍如何使用 NPM 包 videojs-externals-6，使得你可以使用 video.js 播放外部视频源。
简介
videojs-externals-6 是一个 video.js 插件，它可以帮助我们播放来自第三方 CDN 或者本地文件系统中的视频文件。使用该插件，我们不再需要针对不同视频源编写不同的代码，同样的 API 即可适用于多个视频源。
安装
使用 npm 安装 videojs-externals-6：
npm install --save videojs-externals-6
使用
通过以下代码我们可以使用 video.js 播放外部视频源：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -------- ---------------
----- ------------------------------------------------ -----------------
------- -------------------------------------------------------------------
------- ---------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
-------
------
------ ------------- --------------- ----------------- ---------
------- ------------------------------------ -----------------
--------
--------
--- ------ - --------------------
------------------
---- --------------------------------
---
---------
-------
-------在上述代码中，我们将 videojs-externals 通过 CDN 引入，然后在 JavaScript 中调用 externals 方法，在 src 属性中传入视频源即可完成视频播放。
注意：如果你需要播放 HTTPS 或本地视频源，需要在 HTML 页面中加入相关配置。代码如下：
-- -------------------- ---- -------
------ ------------- --------------- ----------------- ---------
------- ------------------------------------- -----------------
--------
--------
--- ------ - ------------------- -
---------- --------- ---------
-------- --
----- ------------
---- ---------------------------------
--
---
------------------
---- ---------------------------------
---
---------在 JavaScript 中，我们通过设置 techOrder 可以指定视频播放技术的优先级，并通过 sources 属性可以指定视频源的格式和地址，以兼容不同设备。在 externals 方法中，我们则直接传入视频源。
结语
videojs-externals-6 可以大大简化你在使用 video.js 播放外部视频源时的代码量和时间成本。不仅如此，它还可以帮助你更好的应对不同源的视频播放，提高用户体验。希望通过本文的介绍和示例，对大家学习和使用 videojs-externals-6 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e0374