EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
2023-09-14 08:59:58 时间
之前在进行EasyNVR多屏开发的时候,由于多屏功能不需要在手机端展示出来(pc多播放为RTMP,手机端播放为HLS),因此只注意到了引用videojs来进行rtmp的播放。由于不同项目需求不同,对hls流的播放也需要体现出来。
videojs在播放rtmp时,是调用Flash来进行播放的,在播放hls时是调用h5来播放的。
<source src="hls地址" type="application/x-mpegURL">
<source src="rtmp地址" type="video/mp4">
主要的不同点在于type的形式
当我们在标签中引用videojs时会通过data-setup=”;来进行控制,我们有时默认为空,由videojs自己来觉定,但是必须要有该属性;
如果是要播放 hls 就改成這樣
data-setup=’{“techOrder”: [“hls”]}’ ;
播放h5或flash,同理;
如果 我们播放方hls, video type 一定要是 type=”application/x-mpegURL”;
其他更多的用法请参考官网文档:http://docs.videojs.com/
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
详细说明:http://www.easydarwin.org/easynvr/
获取更多信息
Copyright © EasyDarwin.org 2012-2017
相关文章
- 【腾讯Bugly干货分享】H5 视频直播那些事
- H5项目常见问题汇总及解决方案
- 利用h5,chart.js监测手机三轴加速度,用以研究计步算法等
- h5直播开发之旅总结
- 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案中使用Onvif协议控制视频设备预置位转动
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用详情功能-视频录像功能说明
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用过程中问题的自我排查-设备不在线问题自我排查检测
- EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(三)使用Onvif协议进行设备PTZ云台控制
- EasyNVR摄像机网页无插件直播方案H5前端构建之:关于接口调用常见的一些问题(401 Unauthorized)
- 解决EasyDSS、EasyNVR流媒体RTMP、HLS(m3u8)、HTTP-FLV播放提示H5播放错误的问题
- 通用安防摄像机通过RTSP转RTMP推流进行H5(RTMP/HLS)直播的方案
- 一种流量成本节省60%以上的手机直播微信直播H5直播幼儿园直播方案
- EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放
- 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案
- 基于EasyDarwin框架实现EasyNVR H5无插件直播流媒体服务器方案
- EasyNVR H5无插件摄像机直播解决方案前端解析之:关于直播页面和视频列表页面切换的问题
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
- EasyNVR H5无插件摄像机直播解决方案前端解析之:引用videojs无法自动播放
- Tensorflow 2.X h5转pb
- [h5棋牌项目]-21-Visual Studio 2017对xp的支持
- 微博h5端爬取
- html一个案例学会所有常用HTML(H5)标签
- 【taro react】---- 编译H5运行后报错:Uncaught ReferenceError: $RefreshSig$ is not defined