video-js RTMP直播

不念不忘少年蓝@ 2023-10-01 18:02 41阅读 0赞

目前主流的几种直播协议

<table> 
 <thead> 
  <tr> 
   <th>协议</th> 
   <th>传输方式</th> 
   <th>视频封装格式</th> 
   <th>延时</th> 
   <th>数据分段</th> 
   <th>html播放</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>httpflv</td> 
   <td>http</td> 
   <td>flv</td> 
   <td>低</td> 
   <td>连续</td> 
   <td>可通过html5解封包播放(flv.js)</td> 
  </tr> 
  <tr> 
   <td>rtmp</td> 
   <td>tcp</td> 
   <td>flv tag</td> 
   <td>低</td> 
   <td>连续</td> 
   <td>不支持</td> 
  </tr> 
  <tr> 
   <td>dash</td> 
   <td>http</td> 
   <td>ts文件</td> 
   <td>高</td> 
   <td>切片</td> 
   <td>可通过html5解封包播放(hls.js)</td> 
  </tr> 
  <tr> 
   <td>hls</td> 
   <td>$1</td> 
   <td>mp4 3gp webm</td> 
   <td>高</td> 
   <td>切片</td> 
   <td>如果dash文件列表是mp4webm文件，可直接播放</td> 
  </tr> 
 </tbody> 
</table>

`RTMP（Real Time Messaging Protocol）`：基于TCP的，由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。

`HLS（HTTP Live Streaming）`：基于HTTP的，是Apple公司开放的音视频传输协议。

`HTTP FLV`：将[RTMP][]封装在HTTP协议之上的，可以更好的穿透防火墙等。

--------------------

我们目前使用的`rtmp`流，库使用`video-js`，不过这里需要注意的一点是我们要使用`x5`版本的，因为`x6`版本及以上不支持`rtmp`（其实就是不支持`flash`了）；

所以这里也放上资源下载连接

[video.js v5.18.4版 2017-3-24更新(支持ie8)][video.js v5.18.4_ 2017-3-24_ie8]  
[video-js.swf][]

##### 使用 #####

html
    <div id="content">
        <video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered" width="100%" height="100%">
        	
            <source src="rtmp://168.0.0.157:1935/live/stream11" type="rtmp/flv">
            <p class="vjs-no-js">
                您的浏览器不支持HTML5，请升级浏览器。
            </p>
        </video>
    </div>
    123456789
    js
    //设置本地flash插件地址
    videojs.options.flash.swf = "/js/video-js-5.8.2/video-js.swf";
        // 初始化视频，设为全局变量
    var myPlayer = videojs('rtmpVideo', {
        autoplay: true,
        controls: true,//控制条
        poster: "/images/camera/playStop.png",
        techOrder: ["flash"],//设置flash播放
        muted: true,// 静音
        preload: "auto",// 预加载
        language: "zh-CN",// 初始化语言
        playbackRates: [1, 2, 3, 4, 5, 8, 10, 20]// 播放速度
    }, function () {
        console.log("--------------成功初始化视频--------------");
        myPlayer.one("playing", function () {         // 监听播放
            console.log("开始播放");
        });
        myPlayer.one("error", function (error) {      // 监听错误
            console.error("监听到异常，错误信息：%o",error);
        });
    });

##### 实际效果 #####

因为我在写这篇文章的时候后台断掉了调试，没有继续推送，所以没有画面  
![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4OTUwOTE1_size_16_color_FFFFFF_t_70]

##### 本地调试出现的问题 #####

**1、播放器在左上角并且提示无法加载插件**

答：下载新的flash插件，因为我用的50版本，都不提示我更新flash，新的chrome版本会提示下载更新。

**2、本地html页面打开播放不了**

答：需要本地服务器环境支持，自己起一个本地服务器然后扔进去再打开。

[RTMP]: https://so.csdn.net/so/search?q=RTMP&spm=1001.2101.3001.7020
[video.js v5.18.4_ 2017-3-24_ie8]: http://www.jq22.com//jquery/jQueryVideo.js5.18.4.zip
[video-js.swf]: https://github.com/videojs/video-js-swf
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4OTUwOTE1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181212140207350.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4OTUwOTE1,size_16,color_FFFFFF,t_70