rtmp流媒体协议播放遇到的坑
2019-06-14 23:28
267 查看
前提:前端网页是不能直接播放rtmp或rtsp直播流的。
项目中需要播放工场仓储物流的实时监控摄像头。经过各种调研,发现video.min.js+videojs-flash.min.js,再加上浏览器安装了adobe flash播放器,则能完美实时播放rtmp视频了。
但是用video.min.js也踩了个严重的坑,很多Bug都是这样,不大,但愁人!
上次看一有趣的前端Bug,说一个前端开发人员一个Bug找了一个晚上,竟不知啥原因。描述是这样,是个地图项目,却发现地图怎么都出不来,就一个蓝色背景,找了好久的原因百思不得姐阿,结果不小心拿水杯时碰到了鼠标滚轮,发现有了地图区域,于是再滚再滚,地图出来了,原来是后端人员随便给了个定位点(0,0)导致放大定位到了大西洋,全是海,尼玛真是一片蓝!~
言归正传,今天遇到的播放rtmp流的坑,所以记录下来。
上代码:
changeRtmpUrl(data: any) { let src = data.src; if(this.player == null){ this.player = window['videojs']('#asn_video', { fill: true }); } //$('#asn_video source').attr('src', src); //this.player.src(src); this.player.src({ type : "rtmp/mp4", src : src }); this.player.load(); this.player.play(); } 我的是动态切换后台给返回的rtmp流地址,结果怎么切换不能播放,于是发现,看代码红色部分this.player.src(src);直接设置src函数的值为流地址是不行的,src函数中要设置为object,里面需要有流地址的src地址源,再加上type属性则完美呈现。。。 后记:关于流媒体还没有完,rtmp流创建了还是及时销毁掉,否则会引起其他页面的错误,有时间了再补充销毁的文章了,希望对相关问题上的朋友有所帮助。相关文章推荐
- 遇到新问题,http协议的mp3文件直接播放。
- RTMP流媒体播放协议简单分析
- spice协议----播放和录音通道
- 遇到的问题---Windows socket error: 通常每个套接字地址(协议/网络地址/端口)只允许使用一次
- VLC 是一款自由、开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件,以及 DVD、音频 CD、VCD 及各类流媒体协议。
- 在android上实现ffmpeg的pipe功能,实现除了file和网络协议以外的流媒体播放
- RTMP协议发布H264 + AAC的实时流媒体,可以用FLASH直接播放
- RTMP流媒体播放流程解析
- vs2010调试播放mp3--遇到的问题
- IOS 上如何播放RTSP协议的视频流
- RTMP流媒体协议在视频监控系统中应用的优势
- 关于上位机与arm使用自定义协议通过串口传输文件时遇到的疑难问题的解决
- RTMP、RTSP、HTTP视频协议详解(附:直播流地址、播放软件)
- RTMP流媒体播放过程
- 视频播放遇到的坑(新手)
- Flash中播放视频和音频流(rtmp协议)
- h5点播播放mp4视频遇到的坑,ios的h5不能播放视频等
- OpenCV Trackbar 实现播放视频代码遇到的问题 cvQueryFrame cvCreateFileCapture cvCreateTrackbar cvSetTrackbarPos
- sqlplus登录时遇到的ORA-12560: TNS: 协议适配器错误解决办法
- mplayer 播放rmvb 遇到问题