在前端开发中，视频播放是一个非常普遍的需求。很多网站或应用都需要展示视频内容。而实现视频播放最基本的就是使用视频流来传输数据。@videojs/http-streaming 就是一个可以方便的实现视频流的 npm 包。
介绍
@videojs/http-streaming 是一个可以在浏览器中播放 HTTP 流式传输的插件。它基于 video.js 库开发并支持所有 JavaScript 平台。
该插件让你能够使用流式传输协议，如 HLS(AAC、MP3、H.264)、DASH(AAC、MP3、H.264) 和 SmoothStreaming(WMV、WMA、MPEG-2)在所有主要的 web 浏览器中播放视频，并自动选择最适合当前环境的传输协议。
安装
@videojs/http-streaming 可以通过 npm 包管理工具进行安装。使用以下命令即可安装该包：
npm install --save @videojs/http-streaming
使用方法
使用 @videojs/http-streaming 插件非常简单，只需要在页面中引入依赖库，然后在 JavaScript 中使用以下代码即可播放视频：
var player = videojs('example-player');
player.src({
src: 'https://example.com/index.m3u8',
type: 'application/x-mpegURL'
});在上面的代码中，'example-player' 是 HTML 中 video 标签的 id。 'https://example.com/index.m3u8' 是视频流的地址。
示例代码
下面是一个完整的示例代码，包含了页面 HTML 和 JavaScript 的使用方法：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------ ------------
----- --------------- ---------------------------- -------------------
----- ------------------------------------------- -----------------
------- ------------------------------------------------
------- ---------------------------------------------------------------------------------------------
-------
------
------ ------------------- -----------------
--------
--------
--- ------ - --------------------------
------------
---- ---------------------------------
----- -----------------------
---
---------
-------
-------总结
@videojs/http-streaming 实现了在浏览器中播放 HTTP 流式传输的功能，同时它还支持 HLS、DASH 和 SmoothStreaming 等流式传输协议。使用该插件非常简单，只需要在页面中引入依赖库，并使用 JavaScript 代码即可播放视频。通过学习该插件的使用，我们可以更好的实现视频播放，同时提高我们的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162518