这几天一直很头疼这个监控视频的问题，研究了很多方案，包括直接用video写，还有vue-video-player插件，最后还是通过h5stream实现了，方法很简单，下面我来简单总结一下。(我是用的vue-cli2)
第一步，先在唯一的html文件中引入几个js的文件
jq就不用我多说了，剩下的几个给大家一下源码参考在官网 h5stream
第二部，在需要调用的vue单文件组件中调用
首先是template中的内容
注意这里面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，就这样，监控视频就可以出来了