在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
第一步
用npm装这个几个包
"video.js": "^6.6.0",
"videojs-flash": "^2.2.0",
"videojs-swf": "^5.4.2",
第二步
在页面引入上述包
//视频插件包
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flash";
import SWF_URL from "videojs-swf/dist/video-js.swf";
videojs.options.flash.swf = SWF_URL; // 设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件
第三步
运用了swiper对视频进行动态生成,分屏等功能。
<div class="swiper-no-swiping" id="swp" >
<swiper :options="swiperOption">
<swiper-slide
:class="{swiperCss1:flagCss1,swiperCss4:flagCss4}"
v-for="(item,index) in videoList"
:key="index"
>
<div class="vBox">
<h4>{{item.cameraName}}</h4>
<div class="V_Box">
<div class="openVideoBox" @click="videoControl(item) "></div>
<video
:id="'my_player'+index"
class="video-js vjs-default-skin vjs-big-play-centered"
preload="auto"
:height="flagCss1==true ? '500px':'300px'"
>
<source :src="item.outTurnFlow" type="rtmp">
</video>
</div>
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
data里面得数据配置
//轮播图控件
swiperOption: {
slidesPerView: 1,
slidesPerColumn: 1,
spaceBetween: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
},
//视频控件
VideoOptions: {
autoplay: true, // 是否自动播放
muted: false, // 是否静音
fluid: false, // 宽高自适应
loop: false,//是否循环播放
techOrder: ["flash"]
},
methods里面得请求
// 查询视频列表并播放视频
onSearch() {
if (JSON.stringify(this.player1) !== "{}") {
if (this.videoList.length > 0) {
this.videoList.forEach((element, index) => {
this.player1 = videojs("my_player" + index);
this.player1.dispose();
});
}
this.player1 = {};
this.videoList = [];
}
if (this.formInline.section_id.length > 0) {
this.axios.get("video/list", {
params: { section_id: this.formInline.section_id }
}).then(res => {
if (res.data.pageResultList.length > 0) {
this.videoList = res.data.pageResultList;
setTimeout(() => {
if (this.videoList.length > 0) {
this.videoList.forEach((element, index) => {
this.player1 = videojs(
"my_player" + index,
this.VideoOptions
);
});
}
}, 200);
}else{
this.$message(res.message)
}
});
}
},
注:上述有些样式代码,是为了切换分屏时候做得动态绑定处理
第四步
切换页面时需要停止这个播放才不会报错
beforeDestroy() {
if (JSON.stringify(this.player1) !== "{}") {
if (this.videoList.length > 0) {
this.videoList.forEach((element, index) => {
this.player1 = videojs("my_player" + index);
this.player1.dispose();
});
}
}
}