37 | 如何使用 video.js 播放多媒体文件？
李超
该思维导图由 AI 生成，仅供参考
在上一篇文章中，我们介绍了 flv.js 播放器。那今天我们再来介绍另一款非常有名的 JavaScript 播放器——video.js。
我们首先来比较一下这两款播放器，看看它们之间有什么不同？在我看来，flv.js 更聚焦在多媒体格式方面，其主要是将 FLV 格式转换为 MP4 格式，而对于播放器的音量控制、进度条、菜单等 UI 展示部分没有做特别的处理。而 video.js 对音量控制、进度条、菜单等 UI 相关逻辑做了统一处理，对媒体播放部分设计了一个插件框架，可以集成不同媒体格式的播放器进去。所以相比较而言，video.js 更像是一款完整的播放器。
video.js 对大多数的浏览器做了兼容。它设计了自己的播放器 UI，接管了浏览器默认的<video>标签，提供了统一的 HTML5/CSS 皮肤。因此，通过 video.js 实现的播放器，在大多数浏览器上运行时都是统一的风格和操作样式，这极大地提高了我们的开发效率。
除了上面介绍的特点外，video.js 还有以下优势：
开源、免费的。不管你是学习、研究，还是产品应用，video.js 都是不错的选择。
轻量。浏览器 UI 的展现全部是通过 HTML5/CSS 完成，没有图片的依赖。
完善的 API 接口文档，让你容易理解和使用。
统一的 UI 设计，不管在哪个浏览器，你都看不出任何差异。
皮肤可以任意更换，很灵活。
开放灵活的插件式设计，让你可以集成各种媒体格式的播放器。
支持多种文字语言，如中文、英文等。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
video.js 是一款功能强大的 JavaScript 播放器，具有完善的 UI 控制和插件框架，能够支持多种媒体格式和传输协议。本文首先介绍了 video.js 的架构和重要组成模块，然后详细展示了如何使用 video.js 播放本地 MP4 文件和 HLS 直播流。通过引入 video.js 库和设置相应的 HTML5 文件，读者可以快速上手使用该播放器。文章还提到了 video.js 在实际直播系统中的应用，以及思考题关于 data-setup 属性的自动加载机制。总的来说，video.js 是一款非常实用的开源流媒体播放器，适用于处理音视频直播媒体流，具有广泛的应用前景。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《从 0 打造音视频直播系统》，新⼈⾸单¥59
《从 0 打造音视频直播系统》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
刘丹请问flv.js、video.js是否都支持2倍速、0.5倍速播放音视频？作者回复: flv.js 和 video.js 最终使用的还是HTML5 的video标签。在 H5的 <video>标签中有 playbackRate 属性，你通过它就可以实现倍速播放了。
2019-10-084- serious 老师，您好，请教个问题哈，http://ip1/hls/camear_167_2_.m3u8 http://IP2/live/cameraid/1000000%241/substream/3.m3u8 它俩协议相同，文件格式相同，为啥子用video.js前者可以播放后者不可以，后者在微信中是可以播放的
作者回复: 你第二个的服务地址是OK的吗？
2021-06-12 - 林玲老师，我用video.js开发的一个web端播放器在chrome端可以，但是在微信或者钉钉的内置浏览器却无法播放
作者回复: 你的流是啥协议？rtmp 是不行的，hls 应该都支持
2020-04-082 
潇湘落木HTML5上播放音视频的几种思路： https://mp.weixin.qq.com/s/fcDWfOKeEpb_EcGx5-07iA2019-11-054- Geek_974707老师请问有什么播放器可以直接播放ts文件吗？如果ts文件列表是不断动态发请求拿到的，要怎么播放这个视频呢？2022-04-08
收起评论
