suojin
/
qilu_hospital_front
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加视频播放插件

Browse Source
main
jinna 2 years ago
parent 673048db33
commit 5ee8afde72
5 changed files with 544 additions and 165 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/views/alarmcenter/index.vue
  2. 11
      src/views/alarmcenter/sosAlarm/list.vue
  3. 512
      src/views/components/h5Player/player.vue
  4. 168
      src/views/components/h5Player/player1.vue
  5. 9
      src/views/wirelessintrusion/warn/record.vue

9
src/views/alarmcenter/index.vue
Unescape View File

@ -20,11 +20,12 @@
<div class="video_box">
<el-row :gutter="20">
<el-col :span="6" v-for="item in videoData" :key="item.id">
<!-- <el-col :span="6" v-for="item in videoData" :key="item.id">
<VideoPlayer :name="item.name" :id="item.id" :code="renderCode(item.tags)"
:url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'"
:playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" />
</el-col>
</el-col> -->
<player :list="videoData"></player>
</el-row>
</div>
</el-dialog>
@ -42,10 +43,12 @@ import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import func from "@/util/func";
import VideoPlayer from "../components/video/video"
import player from "../components/h5Player/player"
export default {
components: {
VideoPlayer
VideoPlayer,
player
},
data() {
return {

11
src/views/alarmcenter/sosAlarm/list.vue
Unescape View File

@ -20,17 +20,18 @@
<div class="video_box">
<el-row :gutter="20">
<el-col :span="6" v-for="(item) in carmeraCode" :key="item.code">
<!-- <el-col :span="6" v-for="(item) in carmeraCode" :key="item.code"> -->
<!-- <VideoPlayer :name="item.name" :id="item.code" :code="item.code" :showBack="true"
:url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'"
:playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" /> -->
<!-- <player></player> -->
<monitorVideoVue :id="item.code" :sys-params="sysParams" :code="item.code"></monitorVideoVue>
<!-- <monitorVideoVue :id="item.code" :sys-params="sysParams" :code="item.code"></monitorVideoVue> -->
<!-- <monitorVideoVue :sys-params="sysParams" :list="carmeraCode"></monitorVideoVue> -->
<!-- <br><br>;
<br><br>data中放入//海康平台参数
<br>sysParams:{<br> appkey:"",<br> secret:"",<br> ip:"",<br> port:443<br>},<br>curShowList: [], // 当前能显示的摄像头 -->
</el-col>
<!-- </el-col> -->
<player :list="carmeraCode"></player>
</el-row>
</div>
</el-dialog>
@ -256,18 +257,16 @@ export default {
linkVideo(row) {
let token = window.sessionStorage.getItem('bizToken');
if (token == 'undefined' || !token) {
console.log('ceshi1')
bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => {
window.sessionStorage.setItem('bizToken', res.data.data.token);
getDeviceCamera(res.data.data.token, { sn: row.hostSerialNumber }).then(res2 => {
const data = res2.data;
this.videoData = data.data;
console.log('videoData ===>',this.videoData)
if(this.videoData.length === 0){
this.$message.warning('未查询到该报警点摄像头');
}
else{
let arr = []
this.videoData.map(item =>{
arr.push(item.name)
})

512
src/views/components/h5Player/player.vue
Unescape View File

@ -1,168 +1,374 @@
<template>
<div id='player'></div>
<div>
<div id="player"></div>
<el-form>
<el-form-item label="当前选中摄像头">
{{
this.playUrlList.length > 0 && this.player
? this.playUrlList[this.player.currentWindowIndex].code
: "--"
}}
</el-form-item>
<el-form-item label="分屏">
<el-radio-group v-model="splitNum" @change="arrangeWindow">
<el-radio-button label="1">1x1</el-radio-button>
<el-radio-button label="2">2x2</el-radio-button>
<el-radio-button label="3">3x3</el-radio-button>
<el-radio-button label="4">4x4</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="预览">
<el-button id="btn-realplay" @click="realplay">开始预览</el-button>
<el-button id="btn-realplay-stop" @click="stopPlay">停止预览</el-button>
<el-button id="btn-stopall" @click="stopAllPlay"
>停止全部窗口</el-button
>
</el-form-item>
<el-form-item label="回放时间">
<e-date-picker
show-time
placeholder="开始时间"
format="YYYY-MM-DD HH:mm:ss"
v-model="playback.startTime"
:value-format="playback.valueFormat"
>
</e-date-picker>
<e-date-picker
show-time
placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss"
v-model="playback.endTime"
:value-format="playback.valueFormat"
>
</e-date-picker>
</el-form-item>
<el-form-item label="回放">
<el-button id="btn-playback" @click="playbackQuery">开始回放</el-button>
<el-button id="btn-playback-pause" @click="playbackPause"
>暂停</el-button
>
<el-button id="btn-playback-sesume" @click="playbackResume"
>恢复</el-button
>
<el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button>
</el-form-item>
<el-form-item label="抓图">
<el-button id="btn-capture-jpeg" @click="capture('JPEG')"
>抓取JPEG</el-button
>
<el-button id="btn-capture-bmp" @click="capture('BMP')"
>抓取BMP</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
// import "@/static/js/h5player.min.js"
import {
queryLivePreview,
queryLiveBack,
} from "@/api/wirelessintrusion/wirelessintrusion";
export default {
data() {
return {
player: null,
splitNum: 1,
mseSupport: MSE_IS_SUPPORT,
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
tabActive: 'decoder',
urls: {
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
},
playback: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
valueFormat: '',
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
},
volumeOffSvg: {
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
},
recordStartState: 0,
recordStartText: '录像'
props: {
list: {
// cameraCode列表
type: Array,
default: () => [],
},
},
data() {
return {
player: null,
playUrlList: [], //预览播放地址
splitNum: 1,
mseSupport: MSE_IS_SUPPORT,
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
tabActive: "decoder",
urls: {
realplay: "ws://10.19.147.22:559/EUrl/q2jQie4",
talk: "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
playback:
"wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
},
playback: {
startTime: "2021-07-26T00:00:00",
endTime: "2021-07-26T23:59:59",
valueFormat: "",
seekStart: "2021-07-26T12:00:00",
rate: "",
},
muted: true,
volume: 50,
volumeOnSvg: {
template:
'<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
},
volumeOffSvg: {
template:
'<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
},
recordStartState: 0,
recordStartText: "录像",
};
},
created() {
// 海康h5插件初始化
setTimeout(() => {
this.init();
this.createPlayer();
this.arrangeWindow();
});
},
methods: {
// 海康视频初始化加载
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener("resize", () => {
this.player.JS_Resize();
});
},
createPlayer() {
this.player = new window.JSPlugin({
szId: "player",
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
iMaxSplit: 4,
iCurrentSplit: 2,
openDebug: true,
oStyle: {
borderSelect: "#FFCC00",
},
});
let _this = this;
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) {
//插件选中窗口回调
console.log("windowSelect callback: ", iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
//插件错误回调
console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) {
//鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) {
//鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) {
//鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) {
//全屏切换回调
console.log("fullScreen callback: ", bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
//首帧显示回调
console.log(
"firstFrame loaded callback: ",
iWndIndex,
iWidth,
iHeight
);
},
performanceLack: function () {
//性能不足回调
console.log("performanceLack callback: ");
},
});
// _this.realplay();
this.queryLive();
},
arrangeWindow() {
this.splitNum =
this.list.length > 1
? 2
: this.list.length > 4
? 3
: this.list.length > 9
? 4
: 4;
const splitNum = this.splitNum;
this.player.JS_ArrangeWindow(splitNum).then(
() => {
console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
},
(e) => {
console.error(e);
}
);
},
// 初始化结束
// 视频预览
realplay(index, playUrl) {
if (this.playUrlList.length === 0) {
this.$message.warning("当前没有可播放的摄像头");
return;
}
// this.mode = 0 //解码方式：0普通模式 1高级模式
// const { player, mode, urls } = this,
// index = player.currentWindowIndex
// // playURL = this.realplay
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
// player.JS_Play(playURL, { playURL, mode }, index1).then(
// () => {
// console.log('realplay success')
// },
// e => { console.error(e) }
// )
if (this.player === null) return;
// let { mode, player } = this;
// let index = this.player.currentWindowIndex;
let mode = 0;
// let playURL = this.playUrlList[player.currentWindowIndex].url;
console.log(playURL, { playURL, mode }, index);
this.player.JS_Play(playURL, { playURL, mode }, index).then(
() => {
// 播放成功回调
console.log("播放成功");
},
(err) => {
console.log("播放失败", err);
}
);
},
created() {
// 海康h5插件初始化
setTimeout(() => {
this.init()
this.createPlayer()
this.arrangeWindow()
})
// 关闭所有视频
stopAllPlay() {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0;
console.log("stopAllPlay success");
this.closeVideoTree();
},
(e) => {
console.error(e);
}
);
},
// 关闭单个视频
stopPlay() {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0;
console.log("stop realplay success");
// this.closeVideoTree()
const index = this.player.currentWindowIndex;
this.selectAisle(this.videoList[index], index);
},
(e) => {
console.error(e);
}
);
},
methods: {
// 海康视频初始化加载
init () {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer () {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
iMaxSplit: 4,
iCurrentSplit: 2,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00',
}
})
let _this = this
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function () { //性能不足回调
console.log('performanceLack callback: ');
}
});
_this.realplay()
capture(imageType) {
let player = this.player,
index = player.currentWindowIndex;
player.JS_CapturePicture(index, "img", imageType).then(
() => {
console.log("capture success", imageType);
},
arrangeWindow () {
const splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
e => { console.error(e) }
)
},
// 初始化结束
// 视频预览
realplay () {
// this.mode = 0 //解码方式：0普通模式 1高级模式
// const { player, mode, urls } = this,
(e) => {
console.error(e);
}
);
},
/**
* 视频流查询
*/
//实时监控播放地址查询
queryLive() {
console.log("视频流查询", this.list);
let playUrlList = [];
this.list.map((code, index) => {
// console.log('code ===>',code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code)
queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
console.log('res ====>',res)
if (res.data.code === 0 || res.data.code == 200) {
playUrlList.push({ code: code, url: res.data.url });
this.playUrlList = playUrlList;
this.realplay(index, res.data.url);
}
});
});
},
/* 回放 */
playbackStart() {
let { player, mode, playback } = this,
index = player.currentWindowIndex,
{ startTime, endTime } = playback;
let playUrl = this.playUrlList[index].playback;
startTime += "Z";
endTime += "Z";
// index = player.currentWindowIndex
// // playURL = this.realplay
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
// player.JS_Play(playURL, { playURL, mode }, index1).then(
// () => {
// console.log('realplay success')
// },
// e => { console.error(e) }
// )
if (this.player === null) return;
// let { mode, player } = this;
let index = 0;
let mode = 0
let playURL = 'ws://10.19.147.22:559/EUrl/q2jQie4';
console.log(playURL, { playURL, mode }, index);
this.player.JS_Play(playURL, { playURL, mode }, index).then(
() => {
// 播放成功回调
console.log("播放成功");
},
(err) => {
console.log("播放失败", err);
}
);
},
// 关闭所有视频
stopAllPlay () {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0
console.log('stopAllPlay success')
this.closeVideoTree()
},
e => { console.error(e) }
)
},
// 关闭单个视频
stopPlay () {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0
console.log('stop realplay success')
// this.closeVideoTree()
const index = this.player.currentWindowIndex
this.selectAisle(this.videoList[index], index)
},
e => { console.error(e) }
)
}
player
.JS_Play(playURL, { playURL, mode }, index, startTime, endTime)
.then(
() => {
console.log("playbackStart success");
this.playback.rate = 1;
},
(e) => {
console.error(e);
}
);
},
}
playbackPause() {
this.player.JS_Pause().then(
() => {
console.log("playbackPause success");
},
(e) => {
console.error(e);
}
);
},
playbackResume() {
this.player.JS_Resume().then(
() => {
console.log("playbackResume success");
},
(e) => {
console.error(e);
}
);
},
/* 回放 */
playbackQuery() {
if (this.playUrlList.length === 0) {
this.$message.warning("当前没有可播放的摄像头");
return;
}
if (
this.playUrlList[this.player.currentWindowIndex].playback != undefined
) {
this.playbackStart();
return;
}
queryLiveBack({
cameraIndexCode: this.playUrlList[this.currentWindowIndex].code,
beginTime: this.playback.startTime,
endTime: this.playback.endTime,
}).then((res) => {
if (res.data.code === 0 || res.data.code == 200) {
this.playUrlList[this.player.currentWindowIndex].playback =
res.data.url;
this.playbackStart();
}
});
},
},
};
</script>
<style>
</style>
<style></style>

168
src/views/components/h5Player/player1.vue
Unescape View File

@ -0,0 +1,168 @@
<template>
<div id='player'></div>
</template>
<script>
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
// import "@/static/js/h5player.min.js"
export default {
data() {
return {
player: null,
splitNum: 1,
mseSupport: MSE_IS_SUPPORT,
// tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
tabActive: 'decoder',
urls: {
realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
},
playback: {
startTime: '2021-07-26T00:00:00',
endTime: '2021-07-26T23:59:59',
valueFormat: '',
seekStart: '2021-07-26T12:00:00',
rate: ''
},
muted: true,
volume: 50,
volumeOnSvg: {
template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
},
volumeOffSvg: {
template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
},
recordStartState: 0,
recordStartText: '录像'
}
},
created() {
// 海康h5插件初始化
setTimeout(() => {
this.init()
this.createPlayer()
this.arrangeWindow()
})
},
methods: {
// 海康视频初始化加载
init () {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer () {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
iMaxSplit: 4,
iCurrentSplit: 2,
openDebug: true,
oStyle: {
borderSelect: '#FFCC00',
}
})
let _this = this
// 事件回调绑定
this.player.JS_SetWindowControlCallback({
windowEventSelect: function (iWndIndex) { //插件选中窗口回调
console.log('windowSelect callback: ', iWndIndex);
},
pluginErrorHandler: function (iWndIndex, iErrorCode, oError) { //插件错误回调
console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
},
windowEventOver: function (iWndIndex) { //鼠标移过回调
//console.log(iWndIndex);
},
windowEventOut: function (iWndIndex) { //鼠标移出回调
//console.log(iWndIndex);
},
windowEventUp: function (iWndIndex) { //鼠标mouseup事件回调
//console.log(iWndIndex);
},
windowFullCcreenChange: function (bFull) { //全屏切换回调
console.log('fullScreen callback: ', bFull);
},
firstFrameDisplay: function (iWndIndex, iWidth, iHeight) { //首帧显示回调
console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
},
performanceLack: function () { //性能不足回调
console.log('performanceLack callback: ');
}
});
_this.realplay()
},
arrangeWindow () {
const splitNum = this.splitNum
this.player.JS_ArrangeWindow(splitNum).then(
() => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
e => { console.error(e) }
)
},
// 初始化结束
// 视频预览
realplay () {
// this.mode = 0 //解码方式：0普通模式 1高级模式
// const { player, mode, urls } = this,
// index = player.currentWindowIndex
// // playURL = this.realplay
// console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
// player.JS_Play(playURL, { playURL, mode }, index1).then(
// () => {
// console.log('realplay success')
// },
// e => { console.error(e) }
// )
if (this.player === null) return;
// let { mode, player } = this;
let index = 0;
let mode = 0
let playURL = 'ws://10.19.147.22:559/EUrl/q2jQie4';
console.log(playURL, { playURL, mode }, index);
this.player.JS_Play(playURL, { playURL, mode }, index).then(
() => {
// 播放成功回调
console.log("播放成功");
},
(err) => {
console.log("播放失败", err);
}
);
},
// 关闭所有视频
stopAllPlay () {
this.player.JS_StopRealPlayAll().then(
() => {
this.playback.rate = 0
console.log('stopAllPlay success')
this.closeVideoTree()
},
e => { console.error(e) }
)
},
// 关闭单个视频
stopPlay () {
this.player.JS_Stop().then(
() => {
this.playback.rate = 0
console.log('stop realplay success')
// this.closeVideoTree()
const index = this.player.currentWindowIndex
this.selectAisle(this.videoList[index], index)
},
e => { console.error(e) }
)
}
},
}
</script>
<style>
</style>

9
src/views/wirelessintrusion/warn/record.vue
Unescape View File

@ -31,11 +31,12 @@
<div class="video_box">
<el-row :gutter="20">
<el-col :span="6" v-for="item in videoData" :key="item.id">
<!-- <el-col :span="6" v-for="item in videoData" :key="item.id">
<VideoPlayer :name="item.name" :id="item.id" :code="renderCode(item.tags)"
:url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'"
:playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" />
</el-col>
</el-col> -->
<player :list="videoData"></player>
</el-row>
</div>
</el-dialog>
@ -67,10 +68,12 @@ import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import func from "@/util/func";
import VideoPlayer from "../../components/video/video"
import player from "../../components/h5Player/player"
export default {
components: {
VideoPlayer
VideoPlayer,
player
},
data() {
return {

Write Preview
Loading…
Cancel
Save