Commit eebc4e26 authored by zhangjianqian's avatar zhangjianqian

大屏监控修改H5player

parent f6bce482
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<img src="@/assets/mapImages/closeBtn.png" alt="" /> <img src="@/assets/mapImages/closeBtn.png" alt="" />
</div> </div>
<div class="box videoBox"> <div class="box videoBox">
<div id="video"></div> <div id="player" ></div>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="dialogVisible = false" <!-- <el-button type="primary" @click="dialogVisible = false"
...@@ -25,35 +25,103 @@ ...@@ -25,35 +25,103 @@
</template> </template>
<script> <script>
import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
import { getPreviewURLs } from "@/api/video/artemis"
//const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const IS_MOVE_DEVICE = true;
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default { export default {
data() { data() {
return { return {
// dialogVisible: true, // dialogVisible: true,
// AfterClose: true, // AfterClose: true,
queryParam: {
cameraIndexCode: ""
},
player: null,
videoOpenNum: -1,
queryParam: {
cameraIndexCode: ""
},
}; };
}, },
watch: {}, watch: {},
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.player = new WasmPlayer(null, "video", this.callBack, { if(!window.JSPlugin){
Height: true, this.loadScript("/h5player/h5player.min.js").then(() =>{
}); this.createPlayer();
this.player.play(this.deviceData.usr, 1); this.init()
})
}else{
this.createPlayer();
this.init()
}
}, 1); }, 1);
// setTimeout(() => {
// this.player = new WasmPlayer(null, "video", this.callBack, {
// Height: true,
// });
// this.player.play(this.deviceData.usr, 1);
// }, 1);
}, },
methods: { methods: {
show() { show() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
handleClose() { // handleClose() {
console.log("关闭"); // console.log("关闭");
this.player.destroy(this.deviceData.usr); // this.player.destroy(this.deviceData.usr);
// document.body.removeChild(this.$refs.videoBox.$el); // // document.body.removeChild(this.$refs.videoBox.$el);
// },
init() {
// 设置播放容器的宽高并监听窗口大小变化
window.addEventListener('resize', () => {
this.player.JS_Resize()
})
},
createPlayer() {
this.player = new window.JSPlugin({
szId: 'player',
szBasePath: "/h5player",
iMaxSplit: 4,
iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
openDebug: true,
oStyle: {
borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
}
})
this.open();
},
open(){
this.queryParam.cameraIndexCode = this.deviceData.resourceId;
getPreviewURLs(this.queryParam).then(response =>{
if(response.data.code == '0'){
this.videoOpenNum++;
let url = response.data.data.url;
//let index = this.player.currentWindowIndex;
this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => {
console.log('realplay success')
},
e => { console.error(e) }
)
}
});
},
loadScript(src){
return new Promise(reslove =>{
let scpritE1 = document.createElement("script");
scpritE1.type = "text/javascript";
scpritE1.src = src;
scpritE1.onload = () => {
reslove();
}
document.body.appendChild(scpritE1);
})
}, },
callBack() {}, callBack() {},
close() { close() {
this.handleClose(); //this.handleClose();
this.mapClass.infowindowClose(); this.mapClass.infowindowClose();
}, },
}, },
...@@ -81,8 +149,8 @@ export default { ...@@ -81,8 +149,8 @@ export default {
padding: 5px 12px 10px 10px; padding: 5px 12px 10px 10px;
width: 350px; width: 350px;
height: 200px; height: 200px;
#video { #player {
height: 100%; height: 190px;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment