用h5video和h5stream实现监控视频的播放--rtsp流

这几天一直很头疼这个监控视频的问题，研究了很多方案，包括直接用video写，还有vue-video-player插件，最后还是通过h5stream实现了，方法很简单，下面我来简单总结一下。(我是用的vue-cli2)

第一步，先在唯一的html文件中引入几个js的文件

    <script src="static/js/jquery-3.1.1.js"></script>
    <script src="static/js/adapter.js"></script>
    <script src="static/js/platform.js"></script>
    <script src="static/js/h5splayer.js"></script>
    <script src="static/js/h5splayerhelper.js"></script>

jq就不用我多说了，剩下的几个给大家一下源码参考在官网 h5stream

第二部，在需要调用的vue单文件组件中调用

首先是template中的内容

<div class="h5videodiv">
   <video class="h5video1" id="h5sVideo1"  autoplay webkit-playsinline playsinline>
   </video>
</div>

注意这里面poster和src都不用写，会自动生成
其次是mounted里面的内容，我还没有整理，大家可以看着思路整理一下

//判断设备
if (H5siOS() === true
       || H5sSafariBrowser() === true)
      {
       $('#h5sVideo1').prop("controls", true）
} 

//先加上这段
var strToken;
strToken = GetURLParameter("token");
if (strToken === undefined){
     strToken = 'token1';
  }
var strStream;
strStream = GetURLParameter("stream");
if (strStream === undefined)
{
     strStream = 'main';
}

//配备的参数
var conf1 = {
       videoid:'h5sVideo1',//跟上面video标签的id一致
       protocol: 'http:', //'http:' or 'https:'
       host: '192.168.0.254:8080', //'localhost:8080'自己内部的网址
       rootpath:'/', // '/' or window.location.pathname
       token:'7c8a',//可变参数
       //streamprofile: 'Profile_1', // {string} - stream profile, main/sub or other predefine transcoding profile
       hlsver:'v1', //v1 is for ts, v2 is for fmp4
       session:'29106f52-2c37-41ce-819e-260ee8746a04' //session got from login可变参数
};

//如果是暂停状态，就让它开始；如果是开始就让他暂停。每次开始之前都先清空参数
$('#h5sVideo1').parent().click(function () {
   if($(this).children(".h5video1").get(0).paused){
       if(v1 != null)
       {
          v1.disconnect();
          v1 = null;
        }
       v1 =new H5sPlayerWS(conf1);
       v1.connect();
    }else{
      v1.disconnect();
      v1 = null;
      $(this).children(".h5video1").get(0).pause();
    }
});

if (GetURLParameter("autoplay") != undefined)
  {
      $('#playpause1').fadeOut();
  }
  $('#h5sVideo1').get(0).onplay = function() {
        console.log("The video has started to play");
   };

其实它的原理其实是这样的 websocket 一直访问这个图片的地址，这些图片都是在服务器里缓存的。咱们看到的是动的画面 其实是一张一张的图片，这个页面会一直刷新，类似局部刷新，达到的这种动态效果，那个src的值会一直变

第三步，最好再引入一下css

@import '../../../static/css/h5splayer.css';

这个也在官网能找到，找不到可以联系我

ok，就这样，监控视频就可以出来了