<!-- * @Author: your name * @Date: 2022-01-26 22:44:02 * @LastEditTime: 2022-01-27 10:12:46 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /test/hello-world/src/views/components/videoView.vue --> <template> <div class="box-wrapper"> <div class="title">{{ deviceData.videoName }}</div> <div class="close" @click="close"> <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> --> <i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i> </div> <div class="box videoBox"> <div id="player" ></div> </div> <span slot="footer" class="dialog-footer"> <!-- <el-button type="primary" @click="dialogVisible = false" >确 定 </el-button> <el-button @click="dialogVisible = false">取 消</el-button> --> </span> </div> </template> <script> 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 { data() { return { // dialogVisible: true, // AfterClose: true, queryParam: { cameraIndexCode: "" }, player: null, videoOpenNum: -1, queryParam: { cameraIndexCode: "" }, }; }, watch: {}, mounted() { this.$nextTick(() => { if(!window.JSPlugin){ this.loadScript("/h5player/h5player.min.js").then(() =>{ this.createPlayer(); this.init() }) }else{ this.createPlayer(); this.init() } }); // setTimeout(() => { // this.player = new WasmPlayer(null, "video", this.callBack, { // Height: true, // }); // this.player.play(this.deviceData.usr, 1); // }, 1); }, methods: { show() { this.dialogVisible = true; }, // handleClose() { // console.log("关闭"); // this.player.destroy(this.deviceData.usr); // // 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() {}, close() { //this.handleClose(); this.mapClass.infowindowClose(); }, }, }; </script> <style lang="scss"> .sub-wnd{ text-align: center !important; } .box-wrapper { box-shadow: 0px 0px 10px #54e0ef inset; background-color: #071738; padding: 10px; position: relative; // width: 670px; border-radius: 7px; .title { padding-left: 10px; font-size: 14px; line-height: 14px; color: #ffffff; } .close { position: absolute; right: 10px; top: 5px; cursor: pointer; } .box { padding: 5px 12px 10px 10px; width: 350px; height: 200px; margin-top: 5px; #player { height: 190px; } } } </style>