video.min.js php,用Video.js实现H5直播界面

这次给大家带来用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格式

当播放录播时候接受到是MP4格式，可以直接使用

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

video.min.js php,用Video.js实现H5直播界面相关推荐

video.min.js php,在WordPress中使用videojs来播放七牛私有空间视频
首先,在主题函数文件functions.php中添加一个获取七牛下载凭证的函数.这部分参考 function qiniu_download_url($url){ $url = trim($url, ' ...
JS获取控制Video
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
在微信里打开网页，video视频出现问题，video.js插件解决
在调试的过程中,发现电脑端,手机端在谷歌中打开是没有问题的.但是在微信里打开页面出现问题. 分析:微信自带的内嵌浏览器是X5内核,而谷歌的内核是Webkit,video在X5内核里有兼容性的问题. 通 ...
如何用js来控制video播放器
在文章开始前,先给大家看下效果图: 在文章开始,给大家先分享一下这个思路: js来控制视频的播放: 1.所有的方法和属性都是由video这个dom元素来调用,如果换成其他的则不能实现 2.video. ...
html视频标签略缩图,JS可以截取video的标签视频缩略图吗？
这次给大家带来JS可以截取video的标签视频缩略图吗?,JS截取video的标签视频缩略图的注意事项有哪些,下面就是实战案例,一起来看一下. JavaScript截取video标签视频缩略图,前几天 ...
Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件话不多说直接上代码在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
JS获取HTML video标签视频第一帧
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <meta charse ...
react.development.js、React-dom.development.js、babel.min.js 下载
前言在写这个博客之前好像也停更了半年之久,去实习鞭打了一波.现在回来继续开始学习新的知识. 废话不多说,刚学react之前还是一样准备一个js配件很麻烦下这 react.development.js ...

video.min.js php,用Video.js实现H5直播界面

video.min.js php,用Video.js实现H5直播界面相关推荐

最新文章

热门文章