从 0 打造音视频直播系统
李超
前新东方音视频直播技术专家,前沪江音视频架构师
32178 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 41 讲
WebRTC 1对1通话 (23讲)
从 0 打造音视频直播系统
15
15
1.0x
00:00/00:00
登录|注册

37 | 如何使用 video.js 播放多媒体文件?

在上一篇文章中,我们介绍了 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
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《从 0 打造音视频直播系统》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(5)

  • 最新
  • 精选
  • 刘丹
    请问flv.js、video.js是否都支持2倍速、0.5倍速播放音视频?

    作者回复: flv.js 和 video.js 最终使用的还是HTML5 的video标签。在 H5的 <video>标签中有 playbackRate 属性,你通过它就可以实现倍速播放了。

    4
  • serious
     老师,您好,请教个问题哈,http://ip1/hls/camear_167_2_.m3u8 http://IP2/live/cameraid/1000000%241/substream/3.m3u8 它俩协议相同,文件格式相同,为啥子用video.js前者可以播放后者不可以,后者在微信中是可以播放的 

    作者回复: 你第二个的服务地址是OK的吗?

  • 林玲
    老师,我用video.js开发的一个web端播放器在chrome端可以,但是在微信或者钉钉的内置浏览器却无法播放

    作者回复: 你的流是啥协议?rtmp 是不行的,hls 应该都支持

    2
  • 潇湘落木
    HTML5上播放音视频的几种思路: https://mp.weixin.qq.com/s/fcDWfOKeEpb_EcGx5-07iA
    4
  • Geek_974707
    老师请问有什么播放器可以直接播放ts文件吗?如果ts文件列表是不断动态发请求拿到的,要怎么播放这个视频呢?
收起评论
显示
设置
留言
5
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部