<template> <div class="app-container" style=""> <div style="height: 100%;"> <el-col style="border:1px solid #cccccc;height: 100%;" :span="4"> <el-tree :data="videoData" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </el-col> <el-col :span="20" style="height: 100%;"> <div id="player"></div> </el-col> </div> </div> </template> <script> import { getVideoTree } from "@/api/video/manager"; import { getPreviewURLs } from "@/api/video/artemis" const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备 const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse export default { name: "Video", components: { }, data() { return { videoData: [], defaultProps: { children: 'childrenVideo', label: 'videoName' }, queryParam: { cameraIndexCode: "" }, player: null, videoOpenNum: -1, cameraIndexCode: "" } }, created() { this.getVideoData(); }, methods: { getVideoData(){ getVideoTree().then(response =>{ this.videoData = response.data; }) }, handleNodeClick(data){ if(this.cameraIndexCode == data.resourceId){ return; } this.cameraIndexCode = data.resourceId; if(data.resourceId){ this.queryParam.cameraIndexCode = data.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) } ) } }); } }, 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', } }) }, 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); }) } }, mounted() { //this.$el.style.setProperty('display', 'block') if(!window.JSPlugin){ this.loadScript("/h5player/h5player.min.js").then(() =>{ this.createPlayer(); this.init() }) }else{ this.createPlayer(); this.init() } } }; </script> <style scoped lang="scss"> .app-container{ position:absolute; top:0; bottom:0; width: 100%; } #player{ width: 100% ; height: 100% ; } </style>