社区
CSS
帖子详情
使用h5 video进行hls拉流,如何监听直播结束事件?
津门铁头娃
2019-03-04 10:03:19
ended这个事件不管用啊..用的是网易云信的播放器
...全文
2216
4
打赏
收藏
使用h5 video进行hls拉流,如何监听直播结束事件?
ended这个事件不管用啊..用的是网易云信的播放器
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
weixin_42204247
2020-11-13
打赏
举报
回复
我也遇到了同样的问题,求解
把键盘撸出火花
2020-09-14
打赏
举报
回复
同款问题,题主解决了么
ChenMans
2020-05-09
打赏
举报
回复
我也是使用的nginx,然后使用video播放nginx代理下的m3u8实时摄像头资源,但是不知道怎么监听事件?
hjs_xxq
2019-07-29
打赏
举报
回复
解决了没 我现在也遇到了 想着加个定时器每过几秒获取一次hls流地址 让后台加个结束的状态 不知道行不行
video
js源码rtmp推流
hls
播放器html5原生态播放器可用
网上找了很多
video
js 都是各种问题,而且积分特别高,自己整理了一下。测试可用,支持 rtmp
拉流
h5
自带的视频
拉流
播放器原生态
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体验外,融合了更多适合国人
使用
的前端组建。并且一套代码适应多种屏幕大小
uniapp - 实现手机端
H5
网页
直播
功能效果,拿到后端推流地址或播放资源后
进行
前端的流畅播放和画面展示功能,uniapp实时推流/
拉流
直播
系统详细教程(提供完整示例代码,一键复制开箱即用!)
uniapp,
h5
网页,手机端
H5
网页,uniapp
h5
直播
功能页面,uniapp
直播
实时推送显示,uniapp
h5
直播
怎么做,怎么
使用
uniapp去实现移动端手机
H5
直播
,
h5
vue+uniapp怎么做
直播
,uniapp中
使用
video
js构建
H5
直播
播放器,uniapp
H5
端怎么实现
直播
推流,uniapp如何实现
直播
,
直播
聊天功能,
h5
平台端
直播
用什么插件,uniapp手机网页
直播
用什么组件插件播放器,uniapp手机
H5
直播
播放器详细教程,
直播
项目,怎么
使用
vue+uniapp怎么做
H5
实时
直播
直播
源码搭建教程之在
h5
video
中的
直播
直播
源码搭建教程之在
h5
video
中的
直播
直播
越来越成为趋势,因为疫情的冲击,不管是
直播
带货还是
直播
教育等等,将线上模式推上了巅峰~ 因为业务和兴趣关系,稍微研究了一下在
H5
中
直播
的相关知识。 PS:如果你对
直播
有所了解,可以skip全篇文章啦,本篇
直播
源码搭建教程文章只涉及到一些
直播
相关的初级知识。 稍微了解一下
直播
的架构。
直播
的协议。 微信小程序中的
直播
。 本地自己搞一个
h5
的
直播
小demo。
直播
源码搭建教程——
直播
的架构 如上图:首先推流就可以简单理解成你的摄像头,负责采集图像,
直播
的推流与
拉流
如何在uniapp中实现?
这里以腾讯云的推流SDK为例,需要引入的插件名称为“live-pusher-plugin”,版本号为“1.1.0”,提供者为“wx0f3cfd8a1e9a4c5e”。这里以腾讯云的
拉流
SDK为例,需要引入的插件名称为“live-player-plugin”,版本号为“1.1.0”,提供者为“wx0f3cfd8a1e9a4c5e”。推流需要
使用
第三方的推流SDK,比如腾讯云的推流SDK或者七牛云的推流SDK。要在uniapp中实现推流和
拉流
,需要
使用
uni-app的视频组件,以及第三方的推流和
拉流
SDK。
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章