<!-- * @Author: your name * @Date: 2022-01-26 22:44:02 * @LastEditTime: 2024-07-25 17:07:09 * @LastEditors: 纪泽龙 jizelong@qq.com * @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: #49d8ff"></i> </div> <div class="line"></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; background: rgba(2, 26, 51, 0.9); border: 1px solid #127bd1; box-shadow: inset 0px 0px 10px 0px #164db2; padding: 10px; position: relative; // width: 670px; border-radius: 7px; .title { padding-left: 10px; font-size: 14px; line-height: 14px; color: #ffffff; } .line { width: 50%; height: 1px; margin-top: 10px; background: linear-gradient( 90deg, rgba(29, 33, 41, 0) 0%, #568ef6 38%, #19d1ed 49%, rgba(29, 33, 41, 0) 109% ); // border: 2px solid; } .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>