社区
移动开发其他问题
帖子详情
H5的video标签获取HLS流,如何实时监听readystatue的状态变化
qq_28204129
2017-08-29 11:38:52
我在使用移动端H5的video标签,然后通过ajax访问接口获得src路径,通过jQuery的attr方法给video动态添加src,因为HLS流加载需要时间加载,如何实时监听它的readystatue,让它的readystatue一旦为4就开始播放呢?
...全文
1931
回复
打赏
收藏
H5的video标签获取HLS流,如何实时监听readystatue的状态变化
我在使用移动端H5的video标签,然后通过ajax访问接口获得src路径,通过jQuery的attr方法给video动态添加src,因为HLS流加载需要时间加载,如何实时监听它的readystatue,让它的readystatue一旦为4就开始播放呢?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
PHP 仿陌陌直播
PHP 仿陌陌直播,此项目利用 TP+Redis+Nginx+nginx-rtmp-module+ffmpeg+
HLS
+Swoole 的架构方案。开源RTMP server red5 java java用的较多,性能还是不错的! crtmpserver c++ 支持多种rtmp协议,移动设备以及IPTV相关网络协议 http://www.rtmpd.com/ Erly
video
erlong 有开源和商业版本 https//github.com/erly
video
/erly
video
h aXe
Video
haXe 一个实验性的,轻量级的服务器 http://code.google.com/p/haxe
video
/ FluorineFx .Net To be defined http://www/fluorinefx.com nginx-rtmp c nginx模块 支持rtmp和
HLS
https://github.com/arut/nginx-rtmp-module 本人采用的则为第5个 Nginx-rtmp ,接下来讲解 安装过程。 安装 Nginx-rtmp 1、下载nginx-rtmp-module: nginx-rtmp-module的官方github地址:https://github.com/arut/nginx-rtmp-module 使用命令: git clone https://github.com/arut/nginx-rtmp-module.git 将nginx-rtmp-module下载到linux中。 2、安装nginx: nginx的官方网站为:http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.8.1.tar.gz tar -zxvf nginx-1.8.1.tar.gz cd nginx-1.8.1 ./configure --prefix=/usr/local/nginx --add-module=../nginx-rtmp-module --with-http_ssl_module make && make install 本次默认安装目录为:/root, add-module为下载的nginx-rtmp-module文件路径。 安装时候可能会报错没有安装openssl,需要执行命令: yum -y install openssl openssl-devel 3、修改nginx配置文件: vi /usr/local/nginx/conf/nginx.conf 加入以下内容: rtmp { server { listen 1935; #
监听
的端口 chunk_size 4000; application
hls
{ #rtmp推
流
请求路径 live on;
hls
on;
hls
_path /usr/share/nginx/html/
hls
;
hls
_fragment 5s; } } }
hls
_path需要可读可写的权限。 修改http中的server模块: #server { #listen 81; #server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } 当然了,root可以跟据自己的需求来改的。 然后启动nginx: /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 4、开始推
流
做好以上的配置后,就可以开始推
流
了,我们可以使用obs来推
流
。 在设置->串
流
中填写信息:URL为 rtmp://xxx:1935/
hls
,xxx为你的服务器的IP地址,
hls
是用来存放
流
媒体的。 秘钥可以随便填写一个,用来播放的时候识别播放哪个
流
媒体的,例如填写test等。 填写完毕后,点击开始串
流
,就说明我们的
流
媒体服务器搭建成功了。 5、观看直播(拉
流
) 观看直播就比较简单了,可以简单的使用
h5
的vedio
标签
就可以观看了。 可以访问http://xxx:81/
hls
/mystream.m3u8来观看直播,其中xxx为你的服务器IP地址, 或者使用 Your browser does not support HTML5
video
. 同上, xxx写的是你服务器IP地址。 然后使用手机访问这个网站就能够观看直播了。延迟大概在20S左右。 (在iOS的safari浏览器中可以正常观看) 写在最后 为什么延迟 那么高呢?这是因为服务器将视频
流
切断成一个个小的以.ts结尾的文件。 "截图" 而我们访问的是.m3u8文件,这个文件内容是将一个个ts文件串联起来的,这就达到了一个播放的效果,所以看起来会有很大的延迟。 "截图" 如果降低延迟也不是没有方法,可以设置切片生成的大小以及访问的速度,但是这样大大增加了服务器的压力。 当然,我们也可以用rtmp拉
流
工具(VLC等)来看该直播,延迟大概在2-5S左右,拉
流
地址与推
流
地址一致。 后台一键安装 直接访问入口即可 初始admin admin 采用Bootstrap3精确定制的lyui除了拥有100%bootstrap体验外,融合了更多适合国人使用的前端组建。并且一套代码适应多种屏幕大小
前端播放
hls
视频
m3u81.m3u8是苹果公司推出的视频播放标准。2.该标准由一个m3u8文件和指向的若干ts传输
流
文件组成m3u8ts。
直播网站理论与实战(Java+FFmpeg+Nginx+
HLS
+
Video
js+VLC)
3、亲手搭建
Video
js环境,实现网页直播拉
流
功能。 梅老师从事音视频与
流
媒体行业18年;曾在永新视博、中科大洋、百度、美国Harris广播事业部等公司就职,经验丰富;曾亲手主导广电直播全套项目,精通h.264/h.265/...
关于uniapp引入webview使用
video
.js播放
hls
(m3u8)格式的直播时全屏返回卡死的问题
关于uniapp引入webview使用
video
.js播放
hls
(m3u8)格式的直播时全屏返回卡死的问题一、使用uniapp的原生
video
组件播放
hls
直播的问题二、尝试在app页面中使用webView,
h5
的
video
.js插件进行播放1.uniapp页面2.使用
video
.js播放直播的webview页面3.使用ckplayer播放器总结 一、使用uniapp的原生
video
组件播放
hls
直播的问题 使用uniapp自带的
video
组件倒是可以正常播放
hls
(m3u8后缀)格式的直播。倒是反馈不是很
IOS
H5
页面中
HLS
视频无法正常播放,使用
hls
.插件
IOS
H5
页面中
HLS
视频无法正常播放,使用
hls
.插件
移动开发其他问题
790
社区成员
13,285
社区内容
发帖
与我相关
我的任务
移动开发其他问题
移动平台 其他移动相关
复制链接
扫一扫
分享
社区描述
移动平台 其他移动相关
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章