453530270@qq.com
2 years ago
22 changed files with 5177 additions and 1330 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,21 +1,24 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|||
<title>宝安区公共文化体育服务中心智慧显示屏</title> |
|||
<script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<noscript> |
|||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|||
</noscript> |
|||
<div id="app"></div> |
|||
<script src="<%= BASE_URL %>static/h5player.min.js"></script> |
|||
|
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
</html> |
|||
|
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|||
<title>宝安区公共文化体育服务中心智慧显示屏</title> |
|||
<script src="./liveplayer-lib.min.js"></script> |
|||
<script src="./haikang/jquery-1.12.4.min.js"></script> |
|||
<script src="./haikang/jsencrypt.min.js"></script> |
|||
<script src="./haikang/web-control_1.2.5.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<noscript> |
|||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|||
</noscript> |
|||
<div id="app"></div> |
|||
<script src="<%= BASE_URL %>static/h5player.min.js"></script> |
|||
|
|||
<!-- built files will be auto injected --> |
|||
</body> |
|||
</html> |
|||
|
|||
|
|||
File diff suppressed because one or more lines are too long
@ -1,168 +1,258 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div id="player" class="item"> |
|||
<!-- <Video :src="src1" :poster="poster" /> --> |
|||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|||
<!-- <video class="demo-video" ref="player" muted autoplay></video> --> |
|||
|
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src2" :poster="poster" /> --> |
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src3" :poster="poster" /> --> |
|||
</div> |
|||
<!-- <div class="item"></div> --> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initPlayer() |
|||
}) |
|||
// this.getVideo() |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: '/static/', |
|||
|
|||
// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|||
iWidth: 600, |
|||
iHeight: 400, |
|||
|
|||
// // 分屏播放，默认最大分屏4*4 |
|||
// iMaxSplit: 16, |
|||
// iCurrentSplit: 1, |
|||
|
|||
// // 样式 |
|||
// oStyle: { |
|||
// border: '#343434', |
|||
// borderSelect: '#FFCC00', |
|||
// background: '#000' |
|||
// } |
|||
}) |
|||
this.initPlugin() |
|||
}, |
|||
/** |
|||
* 事件初始化 |
|||
*/ |
|||
initPlugin() { |
|||
this.player.JS_SetWindowControlCallback({ |
|||
windowEventSelect(iWindIndex) { |
|||
// 插件选中窗口回调 |
|||
console.log('windowSelect callback: ', iWindIndex) |
|||
}, |
|||
pluginErrorHandler(iWindIndex, iErrorCode, oError) { |
|||
// 插件错误回调 |
|||
console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError) |
|||
}, |
|||
windowEventOver(iWindIndex) { |
|||
// 鼠标移过回调 |
|||
console.log('鼠标移过回调', iWindIndex) |
|||
}, |
|||
windowEventOut(iWindIndex) { |
|||
// 鼠标移出回调 |
|||
console.log('鼠标移出回调', iWindIndex) |
|||
}, |
|||
windowFullCcreenChange(bFull) { |
|||
// 全屏切换回调 |
|||
console.log('全屏切换回调', bFull) |
|||
}, |
|||
firstFrameDisplay(iWndIndex, iWidth, iHeight) { |
|||
// 首帧显示回调 |
|||
console.log('首帧显示回调', iWndIndex, iWidth, iHeight) |
|||
}, |
|||
performanceLack(iWndIndex) { |
|||
// 性能不足回调 |
|||
console.log('性能不足回调', iWndIndex) |
|||
} |
|||
}) |
|||
this.play() |
|||
}, |
|||
/** |
|||
* 播放 |
|||
*/ |
|||
play() { |
|||
let preUrl = 'ws://192.168.2.135:10800/ws-flv/hls/stream_1.flv' |
|||
// const param = { |
|||
// playURL: preUrl, |
|||
// // 1：高级模式 0：普通模式，高级模式支持所有 |
|||
// mode: 0 |
|||
// } |
|||
// 当前播放窗口下标 |
|||
let index = 0 |
|||
let mode = 0 |
|||
// console.log(this.playerArr) |
|||
console.log(this.player.JS_Play); |
|||
this.player.JS_Play(preUrl, { preUrl, mode }, index).then( |
|||
() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
console.log('1111111111'); |
|||
}, |
|||
err => { |
|||
console.log('播放失败') |
|||
console.log(preUrl); |
|||
// console.info('JS_Play failed:', err) |
|||
console.info(err) |
|||
} |
|||
) |
|||
}, |
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
<!-- <video id="playWnd" autoplay></video> --> |
|||
<!--预览界面--> |
|||
<!-- <div id="operate" class="operate"> |
|||
<div class="module" style="color:#fff;"> |
|||
<div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""> |
|||
</div> |
|||
<div class="item" style="margin-top: 20px;margin-left: -20px;color:#fff;"> |
|||
|
|||
<button style="width:20px;padding:0;margin:0;color:#fff;" id="startPreview" class="btn">预览</button> |
|||
|
|||
<button style="width:90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!--视频窗口展示--> |
|||
<video id="playWnd" autoplay></video> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
import $ from "jquery"; |
|||
// import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initCount: 0, |
|||
pubKey: '', |
|||
oWebControl2: '', |
|||
} |
|||
}, |
|||
created() { |
|||
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
|
|||
}); |
|||
}, |
|||
methods: { |
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let _that = this; |
|||
const oWebControl = new window.WebControl({ |
|||
szPluginContainer: 'playWnd', // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15900, |
|||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess() { |
|||
console.log('创建WebControl实例成功'); |
|||
oWebControl.JS_StartService('window', { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 |
|||
}) |
|||
.then( |
|||
() => { |
|||
// // 启动插件服务成功 |
|||
oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: _that.cbIntegrationCallBack, |
|||
}); |
|||
oWebControl.JS_CreateWnd('playWnd').then(() => { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
console.log('111111111111'); |
|||
_that.init(); // 创建播放实例成功后初始化 |
|||
_that.getVideoFun('05edddc148b141c5930301af43154942') |
|||
}); |
|||
}, |
|||
() => { |
|||
// 启动插件服务失败 |
|||
console.log('启动插件服务失败'); |
|||
} |
|||
) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
cbConnectError() { |
|||
// 创建WebControl实例失败 |
|||
console.log('xxx'); |
|||
oWebControl = null; |
|||
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); |
|||
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(function () { |
|||
this.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); |
|||
} |
|||
}, |
|||
cbConnectClose(bNormalClose) { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log('cbConnectClose'); |
|||
oWebControl = null; |
|||
}, |
|||
}); |
|||
this.oWebControl2 = oWebControl; |
|||
}, |
|||
//初始化 |
|||
init() { |
|||
let _that = this; |
|||
this.getPubKey(function () { |
|||
// 请自行修改以下变量值 |
|||
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填 |
|||
var secret = _that.setEncrypt("SkTCnQdFbNW4Z2suNj8P"); //综合安防管理平台提供的secret，必填 |
|||
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填 |
|||
var playMode = 0; //初始播放模式：0-预览，1-回放 |
|||
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
var snapDir = ""; //抓图存储路径 |
|||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
var layout = "1x1"; //playMode指定模式的布局 |
|||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 |
|||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// 请自行修改以上变量值 |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: appkey, //API网关提供的appkey |
|||
secret: secret, //API网关提供的secret |
|||
ip: ip, //API网关IP地址 |
|||
playMode: playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: port, //端口 |
|||
snapDir: snapDir, //抓图存储路径 |
|||
videoDir: videoDir, //紧急录像或录像剪辑存储路径 |
|||
layout: layout, //布局 |
|||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 |
|||
encryptedFields: encryptedFields, //加密字段 |
|||
showToolbar: showToolbar, //是否显示工具栏 |
|||
showSmart: showSmart, //是否显示智能信息 |
|||
buttonIDs: buttonIDs, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
let width = document.querySelector("#playWnd").offsetWidth; |
|||
let height = document.querySelector("#playWnd").offsetHeight; |
|||
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 |
|||
console.log(oData); |
|||
}); |
|||
}); |
|||
}, |
|||
// 设置窗口控制回调 |
|||
setCallbacks() { |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
}, |
|||
// 推送消息 |
|||
cbIntegrationCallBack(oData) { |
|||
//操作抓图录像时可以打印信息 |
|||
console.log(oData); |
|||
}, |
|||
//获取公钥 |
|||
getPubKey(callback) { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
if (oData.responseMsg.data) { |
|||
this.pubKey = oData.responseMsg.data; |
|||
console.log(this.pubKey); |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
//RSA加密 |
|||
setEncrypt(value) { |
|||
var encrypt = new window.JSEncrypt(); |
|||
encrypt.setPublicKey(this.pubKey); |
|||
return encrypt.encrypt(value); |
|||
}, |
|||
//视频预览功能 |
|||
getVideoFun(Code) { |
|||
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来 |
|||
var cameraIndexCode = Code; //获取输入的监控点编号值，必填 |
|||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流 |
|||
var transMode = 1; //传输协议：0-UDP，1-TCP |
|||
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用 |
|||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
console.log(cameraIndexCode); |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode, //监控点编号 |
|||
streamMode: streamMode, //主子码流标识 |
|||
transMode: transMode, //传输协议 |
|||
gpuMode: gpuMode, //是否开启GPU硬解 |
|||
wndId: wndId, //可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
console.log(res); |
|||
}, |
|||
err => { |
|||
console.log('播放失败') |
|||
console.log(preUrl); |
|||
// console.info('JS_Play failed:', err) |
|||
console.info(err) |
|||
}); |
|||
}, |
|||
//停止全部预览 |
|||
stopVideoFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制， |
|||
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁， |
|||
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。 |
|||
destroyVideoDiv() { |
|||
this.oWebControl2.JS_DestroyWnd() |
|||
.then((data) => { |
|||
console.log("销毁窗口成功"); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("销毁窗口失败"); |
|||
}); |
|||
}, |
|||
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。 |
|||
zhuaPicFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "snapShot", |
|||
argument: { |
|||
name: "D:\test.jpg", // 窗口布局 |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,63 +1,63 @@ |
|||
<template> |
|||
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" |
|||
:options="playerOptions"></video-player> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import videojs from "video.js"; |
|||
// import "video.js/dist/video-js.css"; |
|||
// import "videojs-flash"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
playerOptions: { |
|||
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 |
|||
autoplay: false, //如果true,浏览器准备好时开始回放。 |
|||
muted: false, // 默认情况下将会消除任何音频。 |
|||
loop: false, // 导致视频一结束就重新开始。 |
|||
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） |
|||
language: 'zh-CN', |
|||
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） |
|||
techOrder: ['flash', 'html5'], // 兼容顺序 |
|||
flash: { |
|||
|
|||
hls: { withCredentials: false }, |
|||
swf: 'static/video-js.swf' // 引入静态文件swf |
|||
}, |
|||
html5: { hls: { withCredentials: false } }, |
|||
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换 |
|||
type: 'rtmp/hls', |
|||
src: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa' |
|||
}], |
|||
poster: "", //你的封面地址 |
|||
// width: document.documentElement.clientWidth, |
|||
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 |
|||
controlBar: { |
|||
timeDivider: true, |
|||
durationDisplay: true, |
|||
remainingTimeDisplay: false, |
|||
fullscreenToggle: true //全屏按钮 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" |
|||
:options="playerOptions"></video-player> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import videojs from "video.js"; |
|||
// import "video.js/dist/video-js.css"; |
|||
// import "videojs-flash"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
playerOptions: { |
|||
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 |
|||
autoplay: false, //如果true,浏览器准备好时开始回放。 |
|||
muted: false, // 默认情况下将会消除任何音频。 |
|||
loop: false, // 导致视频一结束就重新开始。 |
|||
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） |
|||
language: 'zh-CN', |
|||
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） |
|||
techOrder: ['flash', 'html5'], // 兼容顺序 |
|||
flash: { |
|||
|
|||
hls: { withCredentials: false }, |
|||
swf: 'static/video-js.swf' // 引入静态文件swf |
|||
}, |
|||
html5: { hls: { withCredentials: false } }, |
|||
sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换 |
|||
type: 'rtmp/hls', |
|||
src: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa' |
|||
}], |
|||
poster: "", //你的封面地址 |
|||
// width: document.documentElement.clientWidth, |
|||
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 |
|||
controlBar: { |
|||
timeDivider: true, |
|||
durationDisplay: true, |
|||
remainingTimeDisplay: false, |
|||
fullscreenToggle: true //全屏按钮 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,46 +1,46 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<video id='video' class="video-js vjs-default-skin vjs-big-play-centered" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
|
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initVideoPlayer() |
|||
}, |
|||
methods: { |
|||
initVideoPlayer() { |
|||
// 第一个选中的要播放的video标签, 记得是video标签, |
|||
const currentInstance = this.$video(document.querySelector('video'), { |
|||
autoplay: true, // 是否自动播放 |
|||
controls: true, // 是否显示控件 |
|||
}) |
|||
|
|||
currentInstance.src({ |
|||
src: this.nowPlayVideoUrl, |
|||
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频 |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<div class='instance'> |
|||
<video id='video' class="video-js vjs-default-skin vjs-big-play-centered" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
|
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
nowPlayVideoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks1' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initVideoPlayer() |
|||
}, |
|||
methods: { |
|||
initVideoPlayer() { |
|||
// 第一个选中的要播放的video标签, 记得是video标签, |
|||
const currentInstance = this.$video(document.querySelector('video'), { |
|||
autoplay: true, // 是否自动播放 |
|||
controls: true, // 是否显示控件 |
|||
}) |
|||
|
|||
currentInstance.src({ |
|||
src: this.nowPlayVideoUrl, |
|||
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频 |
|||
}) |
|||
} |
|||
}, |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,59 +1,59 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<view> |
|||
<video id="dd" ref="rtmpPlayer2" :destroyOnClose="true" preload="auto" muted> |
|||
</video> |
|||
</view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import videojs from 'video.js' |
|||
import 'video.js/dist/video-js.css' |
|||
|
|||
export default { |
|||
|
|||
components: { |
|||
}, |
|||
mounted() { |
|||
this.myPlayerRtmp = videojs('dd', { |
|||
sources: [{ |
|||
type: 'rtmp/flv', |
|||
src: 'rtmp://ns8.indexforce.com/home/mystream' |
|||
}], |
|||
controls: true, |
|||
muted: true, |
|||
autoplay: true, |
|||
preload: 'auto', |
|||
textTrackDisplay: false, |
|||
errorDisplay: false, |
|||
controlBar: false, |
|||
bigPlayButton: false |
|||
}) |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
beforeDestroy() { |
|||
if (this.myPlayerRtmp) { |
|||
const myPlayerRtmp = this.$refs.rtmpPlayer2 // 不能用document 获取节点 |
|||
videojs(myPlayerRtmp).dispose() // 销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
<template> |
|||
<div class='instance'> |
|||
<view> |
|||
<video id="dd" ref="rtmpPlayer2" :destroyOnClose="true" preload="auto" muted> |
|||
</video> |
|||
</view> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import videojs from 'video.js' |
|||
import 'video.js/dist/video-js.css' |
|||
|
|||
export default { |
|||
|
|||
components: { |
|||
}, |
|||
mounted() { |
|||
this.myPlayerRtmp = videojs('dd', { |
|||
sources: [{ |
|||
type: 'rtmp/flv', |
|||
src: 'rtmp://ns8.indexforce.com/home/mystream' |
|||
}], |
|||
controls: true, |
|||
muted: true, |
|||
autoplay: true, |
|||
preload: 'auto', |
|||
textTrackDisplay: false, |
|||
errorDisplay: false, |
|||
controlBar: false, |
|||
bigPlayButton: false |
|||
}) |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
beforeDestroy() { |
|||
if (this.myPlayerRtmp) { |
|||
const myPlayerRtmp = this.$refs.rtmpPlayer2 // 不能用document 获取节点 |
|||
videojs(myPlayerRtmp).dispose() // 销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -1,49 +1,49 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<div id="vs"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
|
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
import DemoPlugin from 'demoplugin' |
|||
import Player from 'xgplayer' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
let player = new Player({ |
|||
id: 'vs', |
|||
url: 'rtmp://58.200.131.2:1935/livetv/hunantv', |
|||
plugins: [DemoPlugin] |
|||
}) |
|||
const pipInstance = player.getPlugin('pip') |
|||
pipInstance.switchPIP() |
|||
player.registerPlugin(DemoPlugin) |
|||
// const player = new Player({ |
|||
// ..., |
|||
// plugins: [DemoPlugin] |
|||
// }) |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<div class='instance'> |
|||
<div id="vs"></div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
|
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
import DemoPlugin from 'demoplugin' |
|||
import Player from 'xgplayer' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
let player = new Player({ |
|||
id: 'vs', |
|||
url: 'rtmp://58.200.131.2:1935/livetv/hunantv', |
|||
plugins: [DemoPlugin] |
|||
}) |
|||
const pipInstance = player.getPlugin('pip') |
|||
pipInstance.switchPIP() |
|||
player.registerPlugin(DemoPlugin) |
|||
// const player = new Player({ |
|||
// ..., |
|||
// plugins: [DemoPlugin] |
|||
// }) |
|||
}, |
|||
methods: { |
|||
|
|||
}, |
|||
} |
|||
|
|||
|
|||
|
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div class="h5video" id="playerDiv1" style="float: left;"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
var url_1 = 'rtmp://192.168.12.187:1935/live/1'; |
|||
var oPlayerDiv1 = document.getElementById('playerDiv1'); |
|||
oPlayerDiv1.setAttribute("data-rtmp", url_1); |
|||
oPlayerDiv1.setAttribute("href", url_1); |
|||
|
|||
var swfStr = "./js/flowplayer-3.2.18.swf" |
|||
var obj_1 = { |
|||
clip: { |
|||
provider: 'rtmp', |
|||
bufferLength: 0, |
|||
bufferTime: 0, |
|||
autoPlay: true, |
|||
live: true |
|||
}, |
|||
plugins: { |
|||
rtmp: { |
|||
url: "js/flowplayer.rtmp-3.2.13.swf", |
|||
netConnectionUrl: url_1 |
|||
} |
|||
} |
|||
}; |
|||
// JSON.stringify(obj_1) |
|||
flowplayer('playerDiv1', swfStr, obj_1); |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<div class='instance'> |
|||
<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> |
|||
<!-- <LivePlayer class="videostr1" @snapOutside="snapOutside" ref="player2" :videoUrl="flvURL" live /> --> |
|||
<!-- <LivePlayer class="videostr1" :videoUrl="mp4URL" /> --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import LivePlayer from '@liveqing/liveplayer' |
|||
|
|||
export default { |
|||
// props: { |
|||
// msg: String |
|||
// }, |
|||
|
|||
components: { |
|||
LivePlayer |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
videoUrl: 'rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa' |
|||
// mp4URL() { |
|||
// return "http://999.222.444.533/sdk/file/2022-11-29/15047_20221129_103705140/CHN06.mp4" |
|||
// }, |
|||
// flvURL() { |
|||
// return "http://live.hkstv.hk.lxdns.com/flv/hks.flv" |
|||
// }, |
|||
|
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
}, |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style></style> |
|||
|
|||
@ -1,154 +1,154 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div class="item"> |
|||
<!-- <Video :src="src1" :poster="poster" /> --> |
|||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|||
<video class="videosmall" ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv"> |
|||
<!-- <source src="" /> --> |
|||
</video> |
|||
|
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src2" :poster="poster" /> --> |
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src3" :poster="poster" /> --> |
|||
</div> |
|||
<!-- <div class="item"></div> --> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// 引入echarts |
|||
// import * as echarts from "echarts"; |
|||
|
|||
import flvjs from "flv.js"; |
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
|
|||
// import Video from '../../components/btgym/Video.vue' |
|||
export default { |
|||
// components: { |
|||
// Video |
|||
// }, |
|||
data() { |
|||
return { |
|||
player: null, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
|
|||
|
|||
// this.getVideo() |
|||
|
|||
// var videoElement1 = document.getElementById('myFlvVideo'); |
|||
// this.$nextTick(() => { |
|||
// this.createVideo() |
|||
// }) |
|||
// this.createVideo() |
|||
this.init('rtsp://192.168.66.13:554/openUrl/MXdnCG4') |
|||
}, |
|||
methods: { |
|||
// createVideo() { |
|||
// if (flvjs.isSupported()) { |
|||
// var videoElement = document.getElementById('myFlvVideo') |
|||
// console.log(videoElement); |
|||
// this.flvPlayer = flvjs.createPlayer( |
|||
// { |
|||
// type: 'flv', |
|||
// isLive: true, |
|||
// hasAudio: false, |
|||
// url: |
|||
// 'rtsp://192.168.66.13:554/openUrl/MXdnCG4' |
|||
// }, |
|||
|
|||
// { |
|||
// cors: true, // 是否跨域 |
|||
// enableWorker: true, // 是否多线程工作 |
|||
// enableStashBuffer: false, // 是否启用缓存 |
|||
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb |
|||
// autoCleanupSourceBuffer: true // 是否自动清理缓存 |
|||
// } |
|||
// ) |
|||
// this.flvPlayer.attachMediaElement(videoElement) |
|||
// this.flvPlayer.load() |
|||
// // this.flvPlayer.play() |
|||
// // 报错重连 |
|||
// // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { |
|||
// // console.log('errorType:', errType) |
|||
// // console.log('errorDetail:', errDetail) |
|||
// // if (this.flvPlayer) { |
|||
// // this.destoryVideo() |
|||
// // this.createVideo() |
|||
// // } |
|||
// // }) |
|||
// } |
|||
// }, |
|||
|
|||
init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址 |
|||
setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因 |
|||
var videoElement = this.$refs.videosmallone; // 获取到html中的video标签 |
|||
if (flvjs.isSupported()) { |
|||
//因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额 |
|||
if (this.player !== null) { |
|||
this.player.pause(); |
|||
this.player.unload(); |
|||
this.player.detachMediaElement(); |
|||
this.player.destroy(); |
|||
this.player = null; |
|||
} |
|||
this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去 |
|||
{ |
|||
type: "flv", |
|||
url: val, //你的url地址 |
|||
isLive: true, //数据源是否为直播流 |
|||
hasAudio: false, //数据源是否包含有音频 |
|||
hasVideo: true, //数据源是否包含有视频 |
|||
enableStashBuffer: true, //是否启用缓存区 |
|||
}, |
|||
{ |
|||
enableWorker: false, //不启用分离线程 |
|||
enableStashBuffer: false, //关闭IO隐藏缓冲区 |
|||
autoCleanupSourceBuffer: true, //自动清除缓存 |
|||
lazyLoad: false, |
|||
} |
|||
); |
|||
this.player.attachMediaElement(videoElement); //放到dom中去 |
|||
this.player.load();//准备完成 |
|||
//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放 |
|||
this.player.play();//播放 |
|||
} |
|||
}, 1000); |
|||
}, |
|||
|
|||
// destoryVideo() { |
|||
// this.flvPlayer.pause() |
|||
// this.flvPlayer.unload() |
|||
// this.flvPlayer.detachMediaElement() |
|||
// this.flvPlayer.destroy() |
|||
// this.flvPlayer = null |
|||
// } |
|||
|
|||
}, |
|||
beforeUnmount() { |
|||
if (this.player) { |
|||
this.player.pause(); |
|||
this.player.unload(); |
|||
this.player.detachMediaElement(); |
|||
this.player.destroy(); |
|||
this.player = null; |
|||
} |
|||
}, |
|||
|
|||
// }, |
|||
}; |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div class="item"> |
|||
<!-- <Video :src="src1" :poster="poster" /> --> |
|||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|||
<video class="videosmall" ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv"> |
|||
<!-- <source src="" /> --> |
|||
</video> |
|||
|
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src2" :poster="poster" /> --> |
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src3" :poster="poster" /> --> |
|||
</div> |
|||
<!-- <div class="item"></div> --> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// 引入echarts |
|||
// import * as echarts from "echarts"; |
|||
|
|||
import flvjs from "flv.js"; |
|||
|
|||
// 引入api |
|||
// import * as homeApi from '@/api/home' |
|||
|
|||
// import Video from '../../components/btgym/Video.vue' |
|||
export default { |
|||
// components: { |
|||
// Video |
|||
// }, |
|||
data() { |
|||
return { |
|||
player: null, |
|||
}; |
|||
}, |
|||
|
|||
mounted() { |
|||
|
|||
|
|||
// this.getVideo() |
|||
|
|||
// var videoElement1 = document.getElementById('myFlvVideo'); |
|||
// this.$nextTick(() => { |
|||
// this.createVideo() |
|||
// }) |
|||
// this.createVideo() |
|||
this.init('rtsp://192.168.66.13:554/openUrl/MXdnCG4') |
|||
}, |
|||
methods: { |
|||
// createVideo() { |
|||
// if (flvjs.isSupported()) { |
|||
// var videoElement = document.getElementById('myFlvVideo') |
|||
// console.log(videoElement); |
|||
// this.flvPlayer = flvjs.createPlayer( |
|||
// { |
|||
// type: 'flv', |
|||
// isLive: true, |
|||
// hasAudio: false, |
|||
// url: |
|||
// 'rtsp://192.168.66.13:554/openUrl/MXdnCG4' |
|||
// }, |
|||
|
|||
// { |
|||
// cors: true, // 是否跨域 |
|||
// enableWorker: true, // 是否多线程工作 |
|||
// enableStashBuffer: false, // 是否启用缓存 |
|||
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb |
|||
// autoCleanupSourceBuffer: true // 是否自动清理缓存 |
|||
// } |
|||
// ) |
|||
// this.flvPlayer.attachMediaElement(videoElement) |
|||
// this.flvPlayer.load() |
|||
// // this.flvPlayer.play() |
|||
// // 报错重连 |
|||
// // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { |
|||
// // console.log('errorType:', errType) |
|||
// // console.log('errorDetail:', errDetail) |
|||
// // if (this.flvPlayer) { |
|||
// // this.destoryVideo() |
|||
// // this.createVideo() |
|||
// // } |
|||
// // }) |
|||
// } |
|||
// }, |
|||
|
|||
init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址 |
|||
setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因 |
|||
var videoElement = this.$refs.videosmallone; // 获取到html中的video标签 |
|||
if (flvjs.isSupported()) { |
|||
//因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额 |
|||
if (this.player !== null) { |
|||
this.player.pause(); |
|||
this.player.unload(); |
|||
this.player.detachMediaElement(); |
|||
this.player.destroy(); |
|||
this.player = null; |
|||
} |
|||
this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去 |
|||
{ |
|||
type: "flv", |
|||
url: val, //你的url地址 |
|||
isLive: true, //数据源是否为直播流 |
|||
hasAudio: false, //数据源是否包含有音频 |
|||
hasVideo: true, //数据源是否包含有视频 |
|||
enableStashBuffer: true, //是否启用缓存区 |
|||
}, |
|||
{ |
|||
enableWorker: false, //不启用分离线程 |
|||
enableStashBuffer: false, //关闭IO隐藏缓冲区 |
|||
autoCleanupSourceBuffer: true, //自动清除缓存 |
|||
lazyLoad: false, |
|||
} |
|||
); |
|||
this.player.attachMediaElement(videoElement); //放到dom中去 |
|||
this.player.load();//准备完成 |
|||
//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放 |
|||
this.player.play();//播放 |
|||
} |
|||
}, 1000); |
|||
}, |
|||
|
|||
// destoryVideo() { |
|||
// this.flvPlayer.pause() |
|||
// this.flvPlayer.unload() |
|||
// this.flvPlayer.detachMediaElement() |
|||
// this.flvPlayer.destroy() |
|||
// this.flvPlayer = null |
|||
// } |
|||
|
|||
}, |
|||
beforeUnmount() { |
|||
if (this.player) { |
|||
this.player.pause(); |
|||
this.player.unload(); |
|||
this.player.detachMediaElement(); |
|||
this.player.destroy(); |
|||
this.player = null; |
|||
} |
|||
}, |
|||
|
|||
// }, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<div id="player" class="item"> |
|||
<!-- <Video :src="src1" :poster="poster" /> --> |
|||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|||
<!-- <video class="demo-video" ref="player" muted autoplay></video> --> |
|||
|
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src2" :poster="poster" /> --> |
|||
</div> |
|||
<div class="item"> |
|||
<!-- <Video :src="src3" :poster="poster" /> --> |
|||
</div> |
|||
<!-- <div class="item"></div> --> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import '@/utils/h5player.min.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.initPlayer() |
|||
}) |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: '/static/', |
|||
|
|||
// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|||
iWidth: 600, |
|||
iHeight: 400, |
|||
|
|||
// // 分屏播放，默认最大分屏4*4 |
|||
// iMaxSplit: 16, |
|||
// iCurrentSplit: 1, |
|||
|
|||
// // 样式 |
|||
// oStyle: { |
|||
// border: '#343434', |
|||
// borderSelect: '#FFCC00', |
|||
// background: '#000' |
|||
// } |
|||
}) |
|||
this.initPlugin() |
|||
}, |
|||
/** |
|||
* 事件初始化 |
|||
*/ |
|||
initPlugin() { |
|||
this.player.JS_SetWindowControlCallback({ |
|||
windowEventSelect(iWindIndex) { |
|||
// 插件选中窗口回调 |
|||
console.log('windowSelect callback: ', iWindIndex) |
|||
}, |
|||
pluginErrorHandler(iWindIndex, iErrorCode, oError) { |
|||
// 插件错误回调 |
|||
console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError) |
|||
}, |
|||
windowEventOver(iWindIndex) { |
|||
// 鼠标移过回调 |
|||
console.log('鼠标移过回调', iWindIndex) |
|||
}, |
|||
windowEventOut(iWindIndex) { |
|||
// 鼠标移出回调 |
|||
console.log('鼠标移出回调', iWindIndex) |
|||
}, |
|||
windowFullCcreenChange(bFull) { |
|||
// 全屏切换回调 |
|||
console.log('全屏切换回调', bFull) |
|||
}, |
|||
firstFrameDisplay(iWndIndex, iWidth, iHeight) { |
|||
// 首帧显示回调 |
|||
console.log('首帧显示回调', iWndIndex, iWidth, iHeight) |
|||
}, |
|||
performanceLack(iWndIndex) { |
|||
// 性能不足回调 |
|||
console.log('性能不足回调', iWndIndex) |
|||
} |
|||
}) |
|||
this.play() |
|||
}, |
|||
/** |
|||
* 播放 |
|||
*/ |
|||
play() { |
|||
let preUrl = 'ws://192.168.66.13:559/openUrl/jazXRGE' |
|||
// const param = { |
|||
// playURL: preUrl, |
|||
// // 1：高级模式 0：普通模式，高级模式支持所有 |
|||
// mode: 0 |
|||
// } |
|||
// 当前播放窗口下标 |
|||
let index = 0 |
|||
let mode = 0 |
|||
// console.log(this.playerArr) |
|||
console.log(this.player); |
|||
console.log(this.player.JS_Play); |
|||
this.player.JS_Play(preUrl, { preUrl, mode }, index).then( |
|||
() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
console.log('1111111111'); |
|||
}, |
|||
err => { |
|||
console.log('播放失败') |
|||
console.log(preUrl); |
|||
// console.info('JS_Play failed:', err) |
|||
console.info(err) |
|||
} |
|||
) |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<input v-model="code" placeholder="输入监控点编码" @change="onChangeCode" /> |
|||
<button @click="onSubmit">默认预览</button> |
|||
<button @click="onTwoSubmit(2)">4分屏</button> |
|||
<button @click="onTwoSubmit(4)">16分屏</button> |
|||
<button @click="onTwoSubmit(8)">64分屏</button> |
|||
<div id="player" style="width: 800px;height: 800px;"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import http from '@/http/http2.js' |
|||
import '@/utils/h5player.min.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 监控点编码 |
|||
code: '', |
|||
// 播放器对象 |
|||
player: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initPlayer() |
|||
this.play() |
|||
}, |
|||
methods: { |
|||
|
|||
/** |
|||
* 初始化播放器 |
|||
*/ |
|||
initPlayer() { |
|||
this.player = new JSPlugin({ |
|||
// 需要英文字母开头 必填 |
|||
szId: 'player', |
|||
// 必填,引用H5player.min.js的js相对路径 |
|||
szBasePath: './static/util', |
|||
|
|||
// 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|||
iWidth: 600, |
|||
iHeight: 400, |
|||
|
|||
// 分屏播放，默认最大分屏4*4 |
|||
iMaxSplit: 16, |
|||
iCurrentSplit: 1, |
|||
|
|||
// 样式 |
|||
oStyle: { |
|||
border: '#343434', |
|||
borderSelect: '#FFCC00', |
|||
background: '#000' |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 获取取流连接 |
|||
* @returns {*} |
|||
*/ |
|||
// getPreviewUrl() { |
|||
// let tempCode = '61077001001320000018' |
|||
// if (this.code) { |
|||
// tempCode = this.code |
|||
// } |
|||
// const param = { |
|||
// 'cameraIndexCode': tempCode, |
|||
// 'streamType': 0, |
|||
// 'protocol': 'ws', |
|||
// 'transmode': 1 |
|||
// } |
|||
// // 这里 |
|||
// return http.post('/ay-video-manage/video/monitor/getRealTimeMonitorVideo', param) |
|||
// }, |
|||
|
|||
/** |
|||
* 播放 |
|||
*/ |
|||
play() { |
|||
const _this = this |
|||
let preUrl = 'wss://cloud.liveqing.com:1443/ws-flv/hls/LiveGBS0013402000000132000026434020000001320000264.flv?k=LiveGBS0013402000000132000026434020000001320000264.d4d1ee3b8644b53101' |
|||
const param = { |
|||
preUrl: preUrl, |
|||
// 1：高级模式 0：普通模式，高级模式支持所有 |
|||
mode: 0 |
|||
} |
|||
// 索引默认0 |
|||
let index = 0 |
|||
console.log(preUrl); |
|||
console.log(param); |
|||
console.log(this.player.JS_Play); |
|||
this.player.JS_Play(preUrl, param, index).then(() => { |
|||
// 播放成功回调 |
|||
console.log('播放成功') |
|||
}, |
|||
(err) => { |
|||
console.log('播放失败',err) |
|||
}) |
|||
|
|||
// this.getPreviewUrl().then(res => { |
|||
// if (res.status !== 200) { |
|||
// _this.$message.warning('获取视频流失败！') |
|||
// return |
|||
// } |
|||
// let preUrl = res.data.data.url |
|||
// const param = { |
|||
// playURL: preUrl, |
|||
// // 1：高级模式 0：普通模式，高级模式支持所有 |
|||
// mode: 1 |
|||
// } |
|||
// // 索引默认0 |
|||
// if (!index) { |
|||
// index = 0 |
|||
// } |
|||
// _this.player.JS_Play(preUrl, param, index).then(() => { |
|||
// // 播放成功回调 |
|||
// console.log('播放成功') |
|||
// }, |
|||
// (err) => { |
|||
// console.log('播放失败') |
|||
// }) |
|||
// }) |
|||
}, |
|||
|
|||
/** |
|||
* 监控点更新 |
|||
* @param data |
|||
*/ |
|||
onChangeCode(data) { |
|||
console.log(data); |
|||
this.code = data |
|||
this.play() |
|||
}, |
|||
/** |
|||
* 默认预览 |
|||
*/ |
|||
onSubmit() { |
|||
this.play() |
|||
}, |
|||
|
|||
/** |
|||
* 分屏，这里我太懒了，就循环了一个视频流 |
|||
*/ |
|||
onTwoSubmit(num) { |
|||
const _this = this |
|||
// 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格 |
|||
this.player.JS_ArrangeWindow(num).then( |
|||
() => { |
|||
// 循环取流 |
|||
for (let i = 0; i < num * num; i++) { |
|||
_this.play(i) |
|||
} |
|||
}, |
|||
e => { console.error(e) } |
|||
) |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,335 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div ref="playWndBox"> |
|||
<!-- 视频数据站位 --> |
|||
<div id="playWnd" class="playWnd" :style="{ |
|||
height: playWndHeight + 'px', |
|||
width: playWndWidth + 'px', |
|||
}"></div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import '@/utils/h5player.min.js' |
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
|
|||
// import { getVideoRegionTree, getVideoInfo } from "@/api/realTimeInformation"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
treeData: [], |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "name", |
|||
}, |
|||
// 视频盒子的高度 |
|||
playWndHeight: "", |
|||
// 视频盒子的宽度 |
|||
playWndWidth: "", |
|||
oWebControl: null, |
|||
initCount: 0, |
|||
pubKey: "", |
|||
cameraIndexCode: "05edddc148b141c5930301af43154942", // 监控点编号 |
|||
objData: { |
|||
appkey: "29940726", |
|||
ip: "192.168.66.13", |
|||
port: 554, |
|||
playMode: 0, // 0 预览 1回放 |
|||
layout: "2x2", //页面展示的模块数【16】 |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// this.getTreeList(); |
|||
// 首次加载时的到父容器的高度 |
|||
this.playWndHeight = this.$refs.playWndBox.clientHeight; |
|||
// 首次加载时的到父容器的宽度 |
|||
this.playWndWidth = this.$refs.playWndBox.clientWidth - 140; |
|||
// 初始化摄像头 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
}); |
|||
console.log(this._data); |
|||
|
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", () => { |
|||
console.log( |
|||
this.$refs.playWndBox.clientHeight, |
|||
this.$refs.playWndBox.clientWidth |
|||
); |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize( |
|||
this.$refs.playWndBox.clientWidth - 140, |
|||
this.$refs.playWndBox.clientHeight |
|||
); |
|||
} |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 获取左侧树列表 |
|||
// getTreeList() { |
|||
// getVideoRegionTree().then((res) => { |
|||
// this.treeData = res.data; |
|||
// }); |
|||
// }, |
|||
// handleNodeClick(data) { |
|||
// console.log(data); |
|||
// if (!data.children) { |
|||
// getVideoInfo({ videoId: data.id }) |
|||
// .then((res) => { |
|||
// this.previewVideo(res.data); |
|||
// }) |
|||
// .catch((err) => { |
|||
// console.log(err, "-------"); |
|||
// }); |
|||
// } |
|||
// }, |
|||
|
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let that = this; |
|||
this.oWebControl = null; |
|||
that.oWebControl = new WebControl({ |
|||
szPluginContainer: "playWnd", // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15900, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess: () => { |
|||
// 创建WebControl实例成功 |
|||
console.log('1111111'); |
|||
console.log(that.oWebControl); |
|||
that.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
// 值"./VideoPluginConnect.dll"写死 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then( |
|||
function () { |
|||
// 设置消息回调 |
|||
that.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: that.cbIntegrationCallBack, |
|||
}); |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
that.oWebControl |
|||
.JS_CreateWnd("playWnd", 1000, 600) |
|||
.then(function () { |
|||
// 创建播放实例成功后初始化 |
|||
that.init(); |
|||
that.previewVideo(that._data); |
|||
}); |
|||
}, |
|||
function () { |
|||
// 启动插件服务失败 |
|||
} |
|||
); |
|||
}, |
|||
// 创建WebControl实例失败 |
|||
cbConnectError: function () { |
|||
that.oWebControl = null; |
|||
that.$message.warning("插件未启动，正在尝试启动，请稍候..."); |
|||
// 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
window.WebControl.JS_WakeUp("VideoWebPlugin://"); |
|||
that.initCount++; |
|||
if (that.initCount < 3) { |
|||
setTimeout(function () { |
|||
that.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
that.$message.warning("插件启动失败，请检查插件是否安装！"); |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log("cbConnectClose"); |
|||
that.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 初始化 |
|||
init(callback) { |
|||
let that = this; |
|||
that.getPubKey(() => { |
|||
let appkey = that.objData.appkey; //综合安防管理平台提供的appkey，必填 |
|||
let secret = that.setEncrypt('PSkTCnQdFbNW4Z2suNj8'); //综合安防管理平台提供的secret，必填 |
|||
let ip = that.objData.ip; //综合安防管理平台IP地址，必填 |
|||
let playMode = that.objData.playMode; //初始播放模式：0-预览，1-回放 |
|||
let port = that.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
let snapDir = "D:\\SnapDir"; //抓图存储路径 |
|||
let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
let layout = that.objData.layout; //playMode指定模式的布局 |
|||
let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
let encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示 |
|||
let showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
let buttonIDs = |
|||
"0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮 |
|||
that.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: appkey, //API网关提供的appkey |
|||
secret: secret, //API网关提供的secret |
|||
ip: ip, //API网关IP地址 |
|||
playMode: playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: port, //端口 |
|||
snapDir: snapDir, //抓图存储路径 |
|||
videoDir: videoDir, //紧急录像或录像剪辑存储路径 |
|||
layout: layout, //布局 |
|||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 |
|||
encryptedFields: encryptedFields, //加密字段 |
|||
showToolbar: showToolbar, //是否显示工具栏 |
|||
showSmart: showSmart, //是否显示智能信息 |
|||
buttonIDs, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
console.log(oData); |
|||
that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
// 隐藏 |
|||
// that.oWebControl.JS_HideWnd() |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
let that = this; |
|||
console.log(that.oWebControl); |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
if (oData.responseMsg.data) { |
|||
that.pubKey = oData.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// RSA 加密 |
|||
setEncrypt(value) { |
|||
let that = this; |
|||
let encrypt = new window.JSEncrypt(); |
|||
encrypt.setPublicKey(that.pubKey); |
|||
return encrypt.encrypt(value); |
|||
}, |
|||
// 回调的消息 |
|||
cbIntegrationCallBack(oData) { |
|||
let { responseMsg: type } = oData; |
|||
if (type === "error") { |
|||
console.log( |
|||
type, |
|||
type, |
|||
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") |
|||
); |
|||
} else { |
|||
console.log( |
|||
type, |
|||
type, |
|||
this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") |
|||
); |
|||
} |
|||
}, |
|||
// 视频预览功能 |
|||
previewVideo(data) { |
|||
let that = this; |
|||
console.log(data); |
|||
console.log(data.cameraIndexCode); |
|||
let cameraIndexCode = data.cameraIndexCode; // 获取输入的监控点编号值，必填 |
|||
let streamMode = 0; // 主子码流标识：0-主码流，1-子码流 |
|||
let transMode = 0; // 传输协议：0-UDP，1-TCP |
|||
let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用 |
|||
let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
console.log(cameraIndexCode, "-------cameraIndexCode-"); |
|||
// that.initPlugin() |
|||
console.log(that.oWebControl); |
|||
// console.log(this.oWebControl); |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
that.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode.trim(), // 监控点编号 |
|||
streamMode: streamMode, // 主子码流标识 |
|||
transMode: transMode, // 传输协议 |
|||
gpuMode: gpuMode, // 是否开启GPU硬解 |
|||
wndId: wndId, // 可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then(function (oData) { |
|||
console.log(oData); |
|||
}); |
|||
|
|||
}, |
|||
// 停止全部预览 |
|||
stopAllPreview() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 格式化时间 |
|||
dateFormat(oDate, fmt) { |
|||
let o = { |
|||
"M+": oDate.getMonth() + 1, //月份 |
|||
"d+": oDate.getDate(), //日 |
|||
"h+": oDate.getHours(), //小时 |
|||
"m+": oDate.getMinutes(), //分 |
|||
"s+": oDate.getSeconds(), //秒 |
|||
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度 |
|||
S: oDate.getMilliseconds(), //毫秒 |
|||
}; |
|||
if (/(y+)/.test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
(oDate.getFullYear() + "").substr(4 - RegExp.$1.length) |
|||
); |
|||
} |
|||
for (let k in o) { |
|||
if (new RegExp("(" + k + ")").test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
RegExp.$1.length == 1 |
|||
? o[k] |
|||
: ("00" + o[k]).substr(("" + o[k]).length) |
|||
); |
|||
} |
|||
} |
|||
return fmt; |
|||
}, |
|||
}, |
|||
// 组件销毁后 |
|||
destroyed() { |
|||
if (this.oWebControl != null) { |
|||
// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 |
|||
this.oWebControl.JS_HideWnd(); |
|||
// 销毁当前播放的视频 |
|||
this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" }); |
|||
// 断开与插件服务连接 |
|||
this.oWebControl.JS_Disconnect(); |
|||
} |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,252 +1,252 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<video id="playWnd" autoplay></video> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initCount: 0, |
|||
pubKey: '', |
|||
oWebControl2: '', |
|||
//变量名随便命名的，不太会命名 |
|||
} |
|||
}, |
|||
created() { |
|||
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
this.getVideoFun('05edddc148b141c5930301af43154942') |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let _that = this; |
|||
var oWebControl = new WebControl({ |
|||
szPluginContainer: 'playWnd', // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15909, |
|||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess() { |
|||
console.log('创建WebControl实例成功'); |
|||
oWebControl.JS_StartService('window', { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 |
|||
}) |
|||
.then( |
|||
() => { |
|||
// // 启动插件服务成功 |
|||
oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: _that.cbIntegrationCallBack, |
|||
}); |
|||
oWebControl.JS_CreateWnd('playWnd').then(() => { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
_that.init(); // 创建播放实例成功后初始化 |
|||
console.log('111111111111'); |
|||
}); |
|||
}, |
|||
() => { |
|||
// 启动插件服务失败 |
|||
} |
|||
) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
cbConnectError() { |
|||
// 创建WebControl实例失败 |
|||
console.log('xxx'); |
|||
oWebControl = null; |
|||
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); |
|||
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(function () { |
|||
this.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); |
|||
} |
|||
}, |
|||
cbConnectClose() { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log('cbConnectClose'); |
|||
oWebControl = null; |
|||
}, |
|||
}); |
|||
this.oWebControl2 = oWebControl; |
|||
}, |
|||
//初始化 |
|||
init() { |
|||
let _that = this; |
|||
this.getPubKey(function () { |
|||
// 请自行修改以下变量值 |
|||
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填 |
|||
var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填 |
|||
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填 |
|||
var playMode = 0; //初始播放模式：0-预览，1-回放 |
|||
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
var snapDir = ""; //抓图存储路径 |
|||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
var layout = "1x1"; //playMode指定模式的布局 |
|||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 |
|||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// 请自行修改以上变量值 |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: appkey, //API网关提供的appkey |
|||
secret: secret, //API网关提供的secret |
|||
ip: ip, //API网关IP地址 |
|||
playMode: playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: port, //端口 |
|||
snapDir: snapDir, //抓图存储路径 |
|||
videoDir: videoDir, //紧急录像或录像剪辑存储路径 |
|||
layout: layout, //布局 |
|||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 |
|||
encryptedFields: encryptedFields, //加密字段 |
|||
showToolbar: showToolbar, //是否显示工具栏 |
|||
showSmart: showSmart, //是否显示智能信息 |
|||
buttonIDs: buttonIDs, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
let width = document.querySelector("#playWnd").offsetWidth; |
|||
let height = document.querySelector("#playWnd").offsetHeight; |
|||
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 |
|||
console.log('22222222222'); |
|||
console.log(res); |
|||
}); |
|||
}); |
|||
}, |
|||
// 设置窗口控制回调 |
|||
setCallbacks() { |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
}, |
|||
// 推送消息 |
|||
cbIntegrationCallBack(oData) { |
|||
//操作抓图录像时可以打印信息 |
|||
console.log(oData); |
|||
}, |
|||
//获取公钥 |
|||
getPubKey(callback) { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
console.log(oData); |
|||
if (oData.responseMsg.data) { |
|||
this.pubKey = oData.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
//RSA加密 |
|||
// setEncrypt(value) { |
|||
// var encrypt = new encrypt(); |
|||
// encrypt.setPublicKey(this.pubKey); |
|||
// console.log(encrypt.encrypt(value)); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
//视频预览功能 |
|||
getVideoFun(Code) { |
|||
let _that = this; |
|||
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来 |
|||
var cameraIndexCode = Code; //获取输入的监控点编号值，必填 |
|||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流 |
|||
var transMode = 1; //传输协议：0-UDP，1-TCP |
|||
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用 |
|||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
console.log('44444444444'); |
|||
console.log(cameraIndexCode); |
|||
console.log( _that.oWebControl2); |
|||
console.log( _that.oWebControl2.JS_RequestInterface); |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode, //监控点编号 |
|||
streamMode: streamMode, //主子码流标识 |
|||
transMode: transMode, //传输协议 |
|||
gpuMode: gpuMode, //是否开启GPU硬解 |
|||
wndId: wndId, //可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
console.log(res, "res"); |
|||
console.log('3333333333'); |
|||
}).catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
//停止全部预览 |
|||
stopVideoFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制， |
|||
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁， |
|||
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。 |
|||
destroyVideoDiv() { |
|||
this.oWebControl2.JS_DestroyWnd() |
|||
.then((data) => { |
|||
console.log("销毁窗口成功"); |
|||
console.log(data); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("销毁窗口失败"); |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。 |
|||
zhuaPicFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "snapShot", |
|||
argument: { |
|||
name: "D:\test.jpg", // 窗口布局 |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<video id="playWnd" autoplay></video> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
initCount: 0, |
|||
pubKey: '', |
|||
oWebControl2: '', |
|||
//变量名随便命名的，不太会命名 |
|||
} |
|||
}, |
|||
created() { |
|||
// this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新 |
|||
this.$nextTick(() => { |
|||
this.initPlugin(); |
|||
this.getVideoFun('05edddc148b141c5930301af43154942') |
|||
}); |
|||
}, |
|||
methods: { |
|||
// 创建播放实例 |
|||
initPlugin() { |
|||
let _that = this; |
|||
var oWebControl = new WebControl({ |
|||
szPluginContainer: 'playWnd', // 指定容器id |
|||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值 |
|||
iServicePortEnd: 15909, |
|||
szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid |
|||
cbConnectSuccess() { |
|||
console.log('创建WebControl实例成功'); |
|||
oWebControl.JS_StartService('window', { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死 |
|||
}) |
|||
.then( |
|||
() => { |
|||
// // 启动插件服务成功 |
|||
oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: _that.cbIntegrationCallBack, |
|||
}); |
|||
oWebControl.JS_CreateWnd('playWnd').then(() => { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
_that.init(); // 创建播放实例成功后初始化 |
|||
console.log('111111111111'); |
|||
}); |
|||
}, |
|||
() => { |
|||
// 启动插件服务失败 |
|||
} |
|||
) |
|||
.catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
cbConnectError() { |
|||
// 创建WebControl实例失败 |
|||
console.log('xxx'); |
|||
oWebControl = null; |
|||
$('#playWnd').html('插件未启动，正在尝试启动，请稍候...'); |
|||
window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(function () { |
|||
this.initPlugin(); |
|||
}, 3000); |
|||
} else { |
|||
$('#playWnd').html('插件启动失败，请检查插件是否安装！'); |
|||
} |
|||
}, |
|||
cbConnectClose() { |
|||
// 异常断开：bNormalClose = false |
|||
// JS_Disconnect正常断开：bNormalClose = true |
|||
console.log('cbConnectClose'); |
|||
oWebControl = null; |
|||
}, |
|||
}); |
|||
this.oWebControl2 = oWebControl; |
|||
}, |
|||
//初始化 |
|||
init() { |
|||
let _that = this; |
|||
this.getPubKey(function () { |
|||
// 请自行修改以下变量值 |
|||
var appkey = "29940726"; //综合安防管理平台提供的appkey，必填 |
|||
var secret = 'SkTCnQdFbNW4Z2suNj8P'; //综合安防管理平台提供的secret，必填 |
|||
var ip = "192.168.66.13"; //综合安防管理平台IP地址，必填 |
|||
var playMode = 0; //初始播放模式：0-预览，1-回放 |
|||
var port = 554; //综合安防管理平台端口，若启用HTTPS协议，默认443 |
|||
var snapDir = ""; //抓图存储路径 |
|||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径 |
|||
var layout = "1x1"; //playMode指定模式的布局 |
|||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1 |
|||
var encryptedFields = "secret"; //加密字段，默认加密领域为secret |
|||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示 |
|||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮 |
|||
// 请自行修改以上变量值 |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: appkey, //API网关提供的appkey |
|||
secret: secret, //API网关提供的secret |
|||
ip: ip, //API网关IP地址 |
|||
playMode: playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: port, //端口 |
|||
snapDir: snapDir, //抓图存储路径 |
|||
videoDir: videoDir, //紧急录像或录像剪辑存储路径 |
|||
layout: layout, //布局 |
|||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议 |
|||
encryptedFields: encryptedFields, //加密字段 |
|||
showToolbar: showToolbar, //是否显示工具栏 |
|||
showSmart: showSmart, //是否显示智能信息 |
|||
buttonIDs: buttonIDs, //自定义工具条按钮 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
let width = document.querySelector("#playWnd").offsetWidth; |
|||
let height = document.querySelector("#playWnd").offsetHeight; |
|||
_that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次，能和盒子大小一致。 |
|||
console.log('22222222222'); |
|||
console.log(res); |
|||
}); |
|||
}); |
|||
}, |
|||
// 设置窗口控制回调 |
|||
setCallbacks() { |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
}, |
|||
// 推送消息 |
|||
cbIntegrationCallBack(oData) { |
|||
//操作抓图录像时可以打印信息 |
|||
console.log(oData); |
|||
}, |
|||
//获取公钥 |
|||
getPubKey(callback) { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ |
|||
keyLength: 1024, |
|||
}), |
|||
}) |
|||
.then((oData) => { |
|||
console.log(oData); |
|||
if (oData.responseMsg.data) { |
|||
this.pubKey = oData.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
//RSA加密 |
|||
// setEncrypt(value) { |
|||
// var encrypt = new encrypt(); |
|||
// encrypt.setPublicKey(this.pubKey); |
|||
// console.log(encrypt.encrypt(value)); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
//视频预览功能 |
|||
getVideoFun(Code) { |
|||
let _that = this; |
|||
//因为我这里有很多监控点编号需要来回切换，所以用参数传递进来 |
|||
var cameraIndexCode = Code; //获取输入的监控点编号值，必填 |
|||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流 |
|||
var transMode = 1; //传输协议：0-UDP，1-TCP |
|||
var gpuMode = 1; //是否启用GPU硬解，0-不启用，1-启用 |
|||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口） |
|||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, ""); |
|||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); |
|||
console.log('44444444444'); |
|||
console.log(cameraIndexCode); |
|||
console.log( _that.oWebControl2); |
|||
console.log( _that.oWebControl2.JS_RequestInterface); |
|||
_that.oWebControl2.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify({ |
|||
cameraIndexCode: cameraIndexCode, //监控点编号 |
|||
streamMode: streamMode, //主子码流标识 |
|||
transMode: transMode, //传输协议 |
|||
gpuMode: gpuMode, //是否开启GPU硬解 |
|||
wndId: wndId, //可指定播放窗口 |
|||
}), |
|||
}) |
|||
.then((res) => { |
|||
console.log(res, "res"); |
|||
console.log('3333333333'); |
|||
}).catch((err) => { |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
//停止全部预览 |
|||
stopVideoFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "stopAllPreview", |
|||
}); |
|||
}, |
|||
// 销毁播放窗口---这个很重要，因为插件所生成的播放窗口不受html控制， |
|||
// 我是弹窗形式展示的播放，即使我关闭弹窗播放器也会一直存在，无法销毁， |
|||
// 甚至路由跳转都无法销毁，所以我看了指南找到了销毁窗口方法。 |
|||
destroyVideoDiv() { |
|||
this.oWebControl2.JS_DestroyWnd() |
|||
.then((data) => { |
|||
console.log("销毁窗口成功"); |
|||
console.log(data); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("销毁窗口失败"); |
|||
console.log(err); |
|||
}); |
|||
}, |
|||
// 抓图按钮---播放器有工具栏，不需要另外写抓图方法了，所以这个可有可无。 |
|||
zhuaPicFun() { |
|||
this.oWebControl2.JS_RequestInterface({ |
|||
funcName: "snapShot", |
|||
argument: { |
|||
name: "D:\test.jpg", // 窗口布局 |
|||
}, |
|||
}); |
|||
}, |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,348 +1,348 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<div ref="playWnd" :id="containerId" class="flex-1 hidden playWnd" |
|||
v-html="oWebControl === null ? playText : ''"></div> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
export default { |
|||
props: { |
|||
// 内网、公网 4个配置 |
|||
// appkey: { |
|||
// type: "String", |
|||
// default: "29940726", |
|||
// }, |
|||
// secret: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// ip: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// port: { |
|||
// type: "Number", |
|||
// default: 8888, |
|||
// }, |
|||
// 视频布局 |
|||
// layout: { |
|||
// type: "String", |
|||
// default: "1x1", |
|||
// }, |
|||
// 初始播放模式：0-预览，1-回放 |
|||
// playMode: { |
|||
// type: "Number", |
|||
// default: 0, |
|||
// }, |
|||
// 是否显示工具栏，0-不显示，非0-显示 |
|||
showToolbar: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 工具栏按钮 |
|||
toolBarButtonIDs: { |
|||
type: String, |
|||
default: "4098,4097", |
|||
}, |
|||
// 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
showSmart: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 自定义工具条按钮 |
|||
buttonIDs: { |
|||
type: String, |
|||
default: "0,16,256,257,258,259,260,512,515,516,517,768,769", |
|||
}, |
|||
// 相机编号 |
|||
cameraIndexCode: { |
|||
type: [String, Number], |
|||
}, |
|||
// 销毁并重新初始化海康插件 |
|||
refresh: { |
|||
type: Number, |
|||
}, |
|||
// 视频播放容器id |
|||
containerId: { |
|||
type: String, |
|||
default: "playWnd", |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
oWebControl: null, |
|||
plugKey: "", |
|||
// 视频相关参数 |
|||
videoParams: { |
|||
cameraIndexCode: "", //监控点编号 |
|||
streamMode: 0, //主子码流标识：0-主码流，1-子码流 |
|||
transMode: 1, //传输协议：0-UDP，1-TCP |
|||
gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用 |
|||
wndId: 1, //播放窗口序号 |
|||
}, |
|||
videoWidth: null, |
|||
videoHeight: null, |
|||
playText: "启动中...", |
|||
initCount: 0, // 启动次数 |
|||
href: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getPluginUrl(); |
|||
this.createdVideo(); |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
}); |
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", this.windowResize); |
|||
// // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 |
|||
window.addEventListener("scroll", this.windowScroll); |
|||
}, |
|||
watch: { |
|||
// 监听相机编码 |
|||
cameraIndexCode(value) { |
|||
if (value) { |
|||
this.videoParams.cameraIndexCode = value.trim(); |
|||
this.videoParams.wndId = -1; |
|||
if (this.oWebControl) { |
|||
this.previewVideo(); |
|||
} else { |
|||
this.createdVideo(); |
|||
} |
|||
} |
|||
}, |
|||
// 刷新 |
|||
refresh() { |
|||
this.destroyeWnd(); |
|||
setTimeout(() => { |
|||
this.createdVideo(); |
|||
}, 0); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取海康插件下载地址 |
|||
getPluginUrl() { |
|||
return '' |
|||
// getList(1, 999).then(res => { |
|||
// if (res.data.code === 200) { |
|||
// const data = res.data.data.records; |
|||
// data.length |
|||
// if (data.length) { |
|||
// let existArr = data.filter(item => item.paramKey === ""); |
|||
// if (existArr.length) { |
|||
// this.href = existArr[0].paramValue; |
|||
// } |
|||
// } |
|||
// } |
|||
// }).catch(err => { |
|||
// // 报错 |
|||
// console.log(err) |
|||
// }) |
|||
; |
|||
}, |
|||
// 初始化+预览 |
|||
createdVideo() { |
|||
this.initPlugin(() => { |
|||
this.previewVideo(); |
|||
}); |
|||
}, |
|||
// 创建播放实例 |
|||
initPlugin(callback) { |
|||
this.oWebControl = new WebControl({ |
|||
szPluginContainer: this.containerId, // 指定容器id |
|||
iServicePortStart: 15900, |
|||
iServicePortEnd: 15909, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
// 创建WebControl实例成功 |
|||
cbConnectSuccess: () => { |
|||
this.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then(() => { |
|||
// 启动插件服务成功 |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
this.oWebControl |
|||
.JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight) |
|||
.then(() => { |
|||
this.getVersion(callback); |
|||
}); |
|||
}); |
|||
}, |
|||
cbConnectError: () => { |
|||
// 创建WebControl实例失败 |
|||
this.oWebControl = null; |
|||
this.playText = "插件未启动，正在尝试启动，请稍候..."; |
|||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(() => { |
|||
this.initPlugin(); |
|||
}, 2000); |
|||
} else { |
|||
this.playText = ` |
|||
插件启动失败，请检查插件是否安装！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
this.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 消息回调 |
|||
cbIntegrationCallBack() { }, |
|||
// 初始化 |
|||
init(callback) { |
|||
this.getPubKey(() => { |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: '29940726', //API网关提供的appkey |
|||
secret: this.setEncrypt('SkTCnQdFbNW4Z2suNj8P'), //API网关提供的secret |
|||
ip: this.ip, //API网关IP地址z |
|||
playMode: this.playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: this.port, //端口 |
|||
snapDir: "C:\\SnapDir", //抓图存储路径 |
|||
videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径 |
|||
layout: this.layout, //布局 |
|||
enableHTTPS: 1, //是否启用HTTPS协议 |
|||
encryptedFields: "secret", //加密字段 |
|||
showToolbar: this.showToolbar, //是否显示工具栏 |
|||
toolBarButtonIDs: this.toolBarButtonIDs, |
|||
showSmart: this.showSmart, //是否显示智能信息 |
|||
buttonIDs: this.buttonIDs, //自定义工具条按钮 |
|||
protocol: "hls", |
|||
}), |
|||
}) |
|||
.then(() => { |
|||
// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
const params = { |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ keyLength: 1024 }), |
|||
}; |
|||
this.oWebControl.JS_RequestInterface(params).then((res) => { |
|||
if (res.responseMsg.data) { |
|||
this.plugKey = res.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// 视频流RSA加密 |
|||
// setEncrypt(value) { |
|||
// const encrypt = new JSEncrypt(); |
|||
// encrypt.setPublicKey(this.plugKey); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
// 视频预览 |
|||
previewVideo() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify(this.videoParams), |
|||
}); |
|||
}, |
|||
// 显示全屏 |
|||
showFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "setFullScreen", |
|||
}); |
|||
}, |
|||
// 退出全屏 |
|||
exitFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "exitFullScreen", |
|||
}); |
|||
}, |
|||
windowScroll() { |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
windowResize() { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
// 销毁海康插件 |
|||
destroyeWnd() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl.JS_Disconnect().then(() => { }); |
|||
} |
|||
}, |
|||
// 获取海康插件版本号 |
|||
getVersion(callback) { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "getVersion", |
|||
}).then(res => { |
|||
if (res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
this.init(callback); // 创建播放实例成功后初始化 |
|||
console.log("启动插件成功！"); |
|||
} else { |
|||
this.destroyeWnd(); |
|||
this.playText = ` |
|||
插件版本不正确，请重新下载版本安装覆盖！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl |
|||
.JS_DestroyWnd({ |
|||
funcName: "destroyeWnd", |
|||
}) |
|||
.then(() => { }); |
|||
} |
|||
document.removeEventListener("resize", this.windowResize); |
|||
document.removeEventListener("scroll", this.windowScroll); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<!-- <el-button @click="begin"></el-button> --> |
|||
<div ref="playWnd" :id="containerId" class="flex-1 hidden playWnd" |
|||
v-html="oWebControl === null ? playText : ''"></div> |
|||
<!--v-resize="DomResize" 是用来播放器窗口自适应的，如果不需要可以不添加，下面会介绍到--> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
// import '@/utils/h5player.min.js' |
|||
// import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S |
|||
import { WebControl } from 'web-control'; |
|||
export default { |
|||
props: { |
|||
// 内网、公网 4个配置 |
|||
// appkey: { |
|||
// type: "String", |
|||
// default: "29940726", |
|||
// }, |
|||
// secret: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// ip: { |
|||
// type: "String", |
|||
// default: "", |
|||
// }, |
|||
// port: { |
|||
// type: "Number", |
|||
// default: 8888, |
|||
// }, |
|||
// 视频布局 |
|||
// layout: { |
|||
// type: "String", |
|||
// default: "1x1", |
|||
// }, |
|||
// 初始播放模式：0-预览，1-回放 |
|||
// playMode: { |
|||
// type: "Number", |
|||
// default: 0, |
|||
// }, |
|||
// 是否显示工具栏，0-不显示，非0-显示 |
|||
showToolbar: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 工具栏按钮 |
|||
toolBarButtonIDs: { |
|||
type: String, |
|||
default: "4098,4097", |
|||
}, |
|||
// 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示 |
|||
showSmart: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
// 自定义工具条按钮 |
|||
buttonIDs: { |
|||
type: String, |
|||
default: "0,16,256,257,258,259,260,512,515,516,517,768,769", |
|||
}, |
|||
// 相机编号 |
|||
cameraIndexCode: { |
|||
type: [String, Number], |
|||
}, |
|||
// 销毁并重新初始化海康插件 |
|||
refresh: { |
|||
type: Number, |
|||
}, |
|||
// 视频播放容器id |
|||
containerId: { |
|||
type: String, |
|||
default: "playWnd", |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
oWebControl: null, |
|||
plugKey: "", |
|||
// 视频相关参数 |
|||
videoParams: { |
|||
cameraIndexCode: "", //监控点编号 |
|||
streamMode: 0, //主子码流标识：0-主码流，1-子码流 |
|||
transMode: 1, //传输协议：0-UDP，1-TCP |
|||
gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用 |
|||
wndId: 1, //播放窗口序号 |
|||
}, |
|||
videoWidth: null, |
|||
videoHeight: null, |
|||
playText: "启动中...", |
|||
initCount: 0, // 启动次数 |
|||
href: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getPluginUrl(); |
|||
this.createdVideo(); |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
}); |
|||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化 |
|||
window.addEventListener("resize", this.windowResize); |
|||
// // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动 |
|||
window.addEventListener("scroll", this.windowScroll); |
|||
}, |
|||
watch: { |
|||
// 监听相机编码 |
|||
cameraIndexCode(value) { |
|||
if (value) { |
|||
this.videoParams.cameraIndexCode = value.trim(); |
|||
this.videoParams.wndId = -1; |
|||
if (this.oWebControl) { |
|||
this.previewVideo(); |
|||
} else { |
|||
this.createdVideo(); |
|||
} |
|||
} |
|||
}, |
|||
// 刷新 |
|||
refresh() { |
|||
this.destroyeWnd(); |
|||
setTimeout(() => { |
|||
this.createdVideo(); |
|||
}, 0); |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取海康插件下载地址 |
|||
getPluginUrl() { |
|||
return '' |
|||
// getList(1, 999).then(res => { |
|||
// if (res.data.code === 200) { |
|||
// const data = res.data.data.records; |
|||
// data.length |
|||
// if (data.length) { |
|||
// let existArr = data.filter(item => item.paramKey === ""); |
|||
// if (existArr.length) { |
|||
// this.href = existArr[0].paramValue; |
|||
// } |
|||
// } |
|||
// } |
|||
// }).catch(err => { |
|||
// // 报错 |
|||
// console.log(err) |
|||
// }) |
|||
; |
|||
}, |
|||
// 初始化+预览 |
|||
createdVideo() { |
|||
this.initPlugin(() => { |
|||
this.previewVideo(); |
|||
}); |
|||
}, |
|||
// 创建播放实例 |
|||
initPlugin(callback) { |
|||
this.oWebControl = new WebControl({ |
|||
szPluginContainer: this.containerId, // 指定容器id |
|||
iServicePortStart: 15900, |
|||
iServicePortEnd: 15909, |
|||
szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid |
|||
// 创建WebControl实例成功 |
|||
cbConnectSuccess: () => { |
|||
this.oWebControl |
|||
.JS_StartService("window", { |
|||
// WebControl实例创建成功后需要启动服务 |
|||
dllPath: "./VideoPluginConnect.dll", |
|||
}) |
|||
.then(() => { |
|||
// 启动插件服务成功 |
|||
this.oWebControl.JS_SetWindowControlCallback({ |
|||
// 设置消息回调 |
|||
cbIntegrationCallBack: this.cbIntegrationCallBack, |
|||
}); |
|||
this.oWebControl |
|||
.JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight) |
|||
.then(() => { |
|||
this.getVersion(callback); |
|||
}); |
|||
}); |
|||
}, |
|||
cbConnectError: () => { |
|||
// 创建WebControl实例失败 |
|||
this.oWebControl = null; |
|||
this.playText = "插件未启动，正在尝试启动，请稍候..."; |
|||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序 |
|||
this.initCount++; |
|||
if (this.initCount < 3) { |
|||
setTimeout(() => { |
|||
this.initPlugin(); |
|||
}, 2000); |
|||
} else { |
|||
this.playText = ` |
|||
插件启动失败，请检查插件是否安装！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}, |
|||
cbConnectClose: () => { |
|||
this.oWebControl = null; |
|||
}, |
|||
}); |
|||
}, |
|||
// 消息回调 |
|||
cbIntegrationCallBack() { }, |
|||
// 初始化 |
|||
init(callback) { |
|||
this.getPubKey(() => { |
|||
this.oWebControl |
|||
.JS_RequestInterface({ |
|||
funcName: "init", |
|||
argument: JSON.stringify({ |
|||
appkey: '29940726', //API网关提供的appkey |
|||
secret: this.setEncrypt('SkTCnQdFbNW4Z2suNj8P'), //API网关提供的secret |
|||
ip: this.ip, //API网关IP地址z |
|||
playMode: this.playMode, //播放模式（决定显示预览还是回放界面） |
|||
port: this.port, //端口 |
|||
snapDir: "C:\\SnapDir", //抓图存储路径 |
|||
videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径 |
|||
layout: this.layout, //布局 |
|||
enableHTTPS: 1, //是否启用HTTPS协议 |
|||
encryptedFields: "secret", //加密字段 |
|||
showToolbar: this.showToolbar, //是否显示工具栏 |
|||
toolBarButtonIDs: this.toolBarButtonIDs, |
|||
showSmart: this.showSmart, //是否显示智能信息 |
|||
buttonIDs: this.buttonIDs, //自定义工具条按钮 |
|||
protocol: "hls", |
|||
}), |
|||
}) |
|||
.then(() => { |
|||
// 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题 |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
if (callback) { |
|||
callback(); |
|||
} |
|||
}); |
|||
}); |
|||
}, |
|||
// 获取公钥 |
|||
getPubKey(callback) { |
|||
const params = { |
|||
funcName: "getRSAPubKey", |
|||
argument: JSON.stringify({ keyLength: 1024 }), |
|||
}; |
|||
this.oWebControl.JS_RequestInterface(params).then((res) => { |
|||
if (res.responseMsg.data) { |
|||
this.plugKey = res.responseMsg.data; |
|||
callback(); |
|||
} |
|||
}); |
|||
}, |
|||
// 视频流RSA加密 |
|||
// setEncrypt(value) { |
|||
// const encrypt = new JSEncrypt(); |
|||
// encrypt.setPublicKey(this.plugKey); |
|||
// return encrypt.encrypt(value); |
|||
// }, |
|||
// 视频预览 |
|||
previewVideo() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "startPreview", |
|||
argument: JSON.stringify(this.videoParams), |
|||
}); |
|||
}, |
|||
// 显示全屏 |
|||
showFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "setFullScreen", |
|||
}); |
|||
}, |
|||
// 退出全屏 |
|||
exitFullScreen() { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "exitFullScreen", |
|||
}); |
|||
}, |
|||
windowScroll() { |
|||
if (this.oWebControl != null) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
windowResize() { |
|||
this.videoWidth = this.$refs.playWnd.offsetWidth; |
|||
this.videoHeight = this.$refs.playWnd.offsetHeight; |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight); |
|||
} |
|||
}, |
|||
// 销毁海康插件 |
|||
destroyeWnd() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl.JS_Disconnect().then(() => { }); |
|||
} |
|||
}, |
|||
// 获取海康插件版本号 |
|||
getVersion(callback) { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_RequestInterface({ |
|||
funcName: "getVersion", |
|||
}).then(res => { |
|||
if (res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") { |
|||
//JS_CreateWnd创建视频播放窗口，宽高可设定 |
|||
this.init(callback); // 创建播放实例成功后初始化 |
|||
console.log("启动插件成功！"); |
|||
} else { |
|||
this.destroyeWnd(); |
|||
this.playText = ` |
|||
插件版本不正确，请重新下载版本安装覆盖！ |
|||
<a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`; |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.oWebControl) { |
|||
this.oWebControl.JS_HideWnd(); |
|||
this.oWebControl |
|||
.JS_DestroyWnd({ |
|||
funcName: "destroyeWnd", |
|||
}) |
|||
.then(() => { }); |
|||
} |
|||
document.removeEventListener("resize", this.windowResize); |
|||
document.removeEventListener("scroll", this.windowScroll); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,65 +1,65 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<hls-video :videoUrl="currentFileUrl" class="videoBox" |
|||
style="height: 370px"></hls-video> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import HlsVideo from "../../components/btgym/HlsVideo.vue"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
components: { HlsVideo }, |
|||
data() { |
|||
return { |
|||
currentFileUrl: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", //当前视频地址 |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<hls-video :videoUrl="currentFileUrl" class="videoBox" |
|||
style="height: 370px"></hls-video> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import HlsVideo from "../../components/btgym/HlsVideo.vue"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
components: { HlsVideo }, |
|||
data() { |
|||
return { |
|||
currentFileUrl: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", //当前视频地址 |
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
@ -1,91 +1,91 @@ |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" preload="auto" |
|||
autoplay style="width: 1200px;height: 640px;" controls data-setup="{}"></video> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import videojs from "video.js"; |
|||
import "video.js/dist/video-js.css"; |
|||
import "videojs-flash"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.playVideo() |
|||
}, |
|||
methods: { |
|||
playVideo() { |
|||
console.log('22222222222'); |
|||
var videoPlayer = videojs( |
|||
"my-player", |
|||
{ |
|||
sources: [ |
|||
{ |
|||
src: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", |
|||
type: "rtmp/flv" |
|||
} |
|||
], |
|||
muted: true, |
|||
controls: true, |
|||
autoplay: true, |
|||
loop: true, |
|||
techOrder: ["html5", "flash"], |
|||
width: "1200", |
|||
height: "640" |
|||
}, |
|||
function () { |
|||
this.play(); |
|||
console.log('111111111111'); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
<template> |
|||
<v-scale-screen width="1920" height="1080"> |
|||
<div id="ty"> |
|||
|
|||
<div class="main"> |
|||
<div class="center"> |
|||
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" preload="auto" |
|||
autoplay style="width: 1200px;height: 640px;" controls data-setup="{}"></video> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</v-scale-screen> |
|||
</template> |
|||
<script> |
|||
// import flvjs from "flv.js"; |
|||
import videojs from "video.js"; |
|||
import "video.js/dist/video-js.css"; |
|||
import "videojs-flash"; |
|||
|
|||
// 引入api |
|||
import * as homeApi from '@/api/home' |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.playVideo() |
|||
}, |
|||
methods: { |
|||
playVideo() { |
|||
console.log('22222222222'); |
|||
var videoPlayer = videojs( |
|||
"my-player", |
|||
{ |
|||
sources: [ |
|||
{ |
|||
src: "rtmp://192.168.66.13:1935/live/openUrl/1OSHzLa", |
|||
type: "rtmp/flv" |
|||
} |
|||
], |
|||
muted: true, |
|||
controls: true, |
|||
autoplay: true, |
|||
loop: true, |
|||
techOrder: ["html5", "flash"], |
|||
width: "1200", |
|||
height: "640" |
|||
}, |
|||
function () { |
|||
this.play(); |
|||
console.log('111111111111'); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
getVideo() { |
|||
let that = this |
|||
console.log(that); |
|||
homeApi.allGetVideo().then(res => { |
|||
// get allTimeData |
|||
const tmpdata = res.data.returnData |
|||
console.log(tmpdata); |
|||
// this.day_num = tmpdata.day.noRepeatInNum |
|||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|||
// this.mon_num = tmpdata.month.noRepeatInNum |
|||
// this.year_num = tmpdata.year.noRepeatInNum |
|||
|
|||
// let btdata = new Array(); |
|||
// let bvdata = new Array(); |
|||
// tmpdata.foreach(function(item,index){ |
|||
// console.log(item); |
|||
// console.log(index); |
|||
// }); |
|||
|
|||
}); |
|||
}, |
|||
} |
|||
|
|||
|
|||
} |
|||
</script> |
|||
<style> |
|||
.demo-video { |
|||
max-width: 880px; |
|||
max-height: 660px; |
|||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue