1、RTMP协议
(1)RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输 开发的开放协议。
(2)是流媒体协议。
(3)RTMP协议是 Adobe 的私有协议,未完全公开。
(4)RTMP协议一般传输的是 flv,f4v 格式流。
(5)RTMP一般在 TCP 1个通道上传输命令和数据。
2、RTSP协议
(1)是流媒体协议。
(2)RTSP协议是共有协议,并有专门机构做维护。.
(3)RTSP协议一般传输的是 ts、mp4 格式的流。
(4)RTSP传输一般需要 2-3 个通道,命令和数据通道分离。
3、HTTP协议
(1)不是是流媒体协议。
(2)HTTP协议是共有协议,并有专门机构做维护。
(3)HTTP协议没有特定的传输流。
(4)HTTP传输一般需要 2-3 个通道,命令和数据通道分离。
我们这里使用VIDEOJS库,所用的版本是video.js v5.18.4 ,
版本选择: 我们要使用x5版本的,因为x6版本及以上不支持rtmp。
下载地址:
video.js v5.18.4下载
代码(里面的路径放要修改自己的)
//css <link href="assets/plugins/video5.18.4/css/video-js.css" rel="stylesheet"> //html <video id="example_video_5" class="video-js vjs-default-skin videoStyle" controls autoplay preload="auto" height="230px" poster="assets/plugins/video5.18.4/m.jpg" data-setup="{}"> <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/flv"> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video> // js <script src="assets/plugins/video5.18.4/js/video.min.js"></script> <script src="assets/plugins/video5.18.4/js/videojs-ie8.min.js"></script>
var myPlayer5 = videojs('example_video_5'); videojs("example_video_5").ready( function(){ var myPlayer5 = this;myPlayer5.play(); } );
poster=“assets/plugins/video5.18.4/m.jpg” 是不显示视频默认显示的图片
在保障代码引入正确且代码所在服务器上时,按上述代码就可以正常显示效果。如果是本地的html会报:video.min.js:18 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
在本地的可以搭个nginx服务器,五分钟的事儿搞定。参考:https://blog.csdn.net/zeng092210/article/details/93785099效果图:
但是就像我本人的情况html中不止这一个直播视频,我们需要建立多个播放器
引入文件和版本什么都不变
//视频1 <div class="cartoon cartoonRTMP1"></div>
//视频2
<div class=“cartoon cartoonRTMP2”></div>
//视频3
<div class=“cartoon cartoonRTMP2”></div>
//视频4
<div class=“cartoon cartoonRTMP2”></div>
$(document).ready(function (){ //路径地址数组 var videoUrl = [ 'rtmp://live.hkstv.hk.lxdns.com/live/hks1', 'rtmp://ns8.indexforce.com/home/mystream', 'rtmp://live.hkstv.hk.lxdns.com/live/hks1', 'rtmp://ns8.indexforce.com/home/mystream', ] var v_long = videoUrl.length; for(var pop = 1;pop < v_long+1;pop++){ var videoHtml = '<video id="example_video_'+ pop +'" class="video-js vjs-default-skin videoStyle" controls preload="auto" height="230px"' +'poster="assets/plugins/video5.18.4/m.jpg" data-setup="{}">' +'<source src="'+ videoUrl[pop-1] +'" type="video/rtmp">' +'<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>' +'</video>' switch (pop){ case 1: $('.cartoonRTMP1').append(videoHtml) break; case 2: $('.cartoonRTMP2').append(videoHtml) break; case 3: $('.cartoonRTMP3').append(videoHtml) break; case 4: $('.cartoonRTMP4').append(videoHtml) break; default: alert('没有人要你...') } var videoHtml = '' } var myPlayer1 = videojs('example_video_1'); videojs("example_video_1").ready(function(){var myPlayer1 = this;myPlayer1.play();}); var myPlayer2 = videojs('example_video_2'); videojs("example_video_2").ready(function(){var myPlayer2 = this;myPlayer2.play();}); var myPlayer3 = videojs('example_video_3'); videojs("example_video_3").ready(function(){var myPlayer3 = this;myPlayer3.play();}); var myPlayer4 = videojs('example_video_4'); videojs("example_video_4").ready(function(){var myPlayer4 = this;myPlayer4.play();}); })
效果图:
可用的rtmp测试地址:
rtmp://ns8.indexforce.com/home/mystream
rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
rtmp://202.69.69.180:443/webcast/bshdlive-pc入坑错误总结:
1.
如果浏览器还是提示VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.,先查看浏览器是允许flash,点击地址前面感叹号-flash设置为允许
2.查看服务器地址配置支持不支持文件(比如我:引用bootstrap nginx没有配置支持eot、otf、ttf、woff、svg、woff2这些格式,本地可以放到服务器就不图标显示不出来)。
3.html放到服务器上(本地访问报错)
4.video标签 class 添加video-js 配合data-setup="{}"
缺一不可完整案例下载及其说明(下载放到服务器就能播)
链接:https://pan.baidu.com/s/12gLJ1qDJM2cwzN5k2Y_W0Q
提取码:y8tc服务器路径配置地址(大神忽略):
注意:浏览器flash允许要打开
方式:路径前面感叹号 => 如果直接看到flash 选择允许。没有直接看到去网站设置里面设置</div> <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet"> </div>