这次给大家带来用video.js实现h5直播界面，用video.js实现h5直播界面的注意事项有哪些，下面就是实战案例，一起来看一下。
最近做了一个移动端H5简易版直播页，只有直播功能，后期再添加弹幕和礼物，要求是在微信中，虽然没有涉及到录制直播这方面，但也去了解下关于直播方面的相关知识，
1.构成
如图所示，背景利用video标签播放直播，如有弹幕可以采用webscoket 来实时获取弹幕，礼物或者动画则用css3实现。
2.流程
移动端通过原生系统，pc采用obs软件进行视频的采集，在数据处理，编码，通过rtmp推流到流媒体服务器，流媒体服务器会生成不同格式的播放视频流，如rtmp，hls，再拉流，音视频解码，播放。
3.推流
RTMP
：是 Macromedia 开发的实时消息传输协议，改协议基于TCP，现在属于 Adobe，主要用来在Flash/air平台和支持RTMP协议的流媒体/交互服务器之间的音视频和数据同心。
优点：协议简单，各个平台都容易实现，CDN 支持良好。
4.拉流
通过了解，分为3种。
RTMP ：本质为TCP长链接，每个时刻的数据收到后立刻转发，延迟低。
-HTTP-FLV：本质为HTTP长链接，每个时刻的数据收到后立刻转发，延迟低。
-HLS : HTTP短链接，跨平台好，延迟稍高。它主要包括两个内容.m3u8文件和.ts文件。通过请求 m3u8 的 url，video 标签会解析这个文件，并找到对应的 ts 文件来播放。
5.遇到的问题
主要用到video.js
QQx5内核：
在安卓微信，qq浏览器，由于是x5内核，播放视频时候会弹出一个系统播放层，但是在qq浏览器存在bug，在最上层存在黑色层。解决方法是隐藏video标签。
当直播时接受到数据是rtmp协议，无法直接播发，转换成.m3u8格式
<source src="http://xxxxxx.m3u8" type=''application/x-mpegURL" />
当播放录播时候接受到是MP4格式，可以直接使用
<source src="http://xxxxxx.mp4" type=''video/mp4" />
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上就是用Video.js实现H5直播界面的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
357
