添加视频播放插件

src/views/alarmcenter/index.vue

@@ -20,11 +20,12 @@
 
       <div class="video_box">
         <el-row :gutter="20">
-          <el-col :span="6" v-for="item in videoData" :key="item.id">
+          <!-- <el-col :span="6" v-for="item in videoData" :key="item.id">
             <VideoPlayer :name="item.name" :id="item.id" :code="renderCode(item.tags)"
               :url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'"
               :playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" />
-          </el-col>
+          </el-col> -->
+            <player :list="videoData"></player>
         </el-row>
       </div>
     </el-dialog>
@@ -42,10 +43,12 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import func from "@/util/func";
 import VideoPlayer from "../components/video/video"
+import player from "../components/h5Player/player"
 
 export default {
   components: {
-    VideoPlayer
+    VideoPlayer,
+    player
   },
   data() {
     return {

src/views/alarmcenter/sosAlarm/list.vue

@@ -20,17 +20,18 @@
 
       <div class="video_box">
         <el-row :gutter="20">
-          <el-col :span="6" v-for="(item) in carmeraCode" :key="item.code">
+          <!-- <el-col :span="6" v-for="(item) in carmeraCode" :key="item.code"> -->
             <!-- <VideoPlayer :name="item.name" :id="item.code" :code="item.code" :showBack="true"
               :url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'"
               :playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" /> -->
             <!-- <player></player> -->
-            <monitorVideoVue  :id="item.code" :sys-params="sysParams" :code="item.code"></monitorVideoVue>
+            <!-- <monitorVideoVue  :id="item.code" :sys-params="sysParams" :code="item.code"></monitorVideoVue> -->
             <!-- <monitorVideoVue   :sys-params="sysParams" :list="carmeraCode"></monitorVideoVue> -->
             <!-- <br><br>;
             <br><br>data中放入//海康平台参数
             <br>sysParams:{<br>  appkey:"",<br>  secret:"",<br>  ip:"",<br>  port:443<br>},<br>curShowList: [], // 当前能显示的摄像头 -->
-          </el-col>
+          <!-- </el-col> -->
+          <player :list="carmeraCode"></player>
         </el-row>
       </div>
     </el-dialog>
@@ -256,18 +257,16 @@ export default {
     linkVideo(row) {
       let token = window.sessionStorage.getItem('bizToken');
       if (token == 'undefined' || !token) {
-        console.log('ceshi1')
         bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => {
           window.sessionStorage.setItem('bizToken', res.data.data.token);
           getDeviceCamera(res.data.data.token, { sn: row.hostSerialNumber }).then(res2 => {
             const data = res2.data;
             this.videoData = data.data;
-            
-            console.log('videoData ===>',this.videoData)
             if(this.videoData.length === 0){
               this.$message.warning('未查询到该报警点摄像头');
             }
             else{
+              let arr = []
               this.videoData.map(item =>{
                 arr.push(item.name)
               })

src/views/components/h5Player/player.vue

@@ -1,168 +1,374 @@
 <template>
-  <div id='player'></div>
+  <div>
+    <div id="player"></div>
+    <el-form>
+      <el-form-item label="当前选中摄像头">
+        {{
+          this.playUrlList.length > 0 && this.player
+            ? this.playUrlList[this.player.currentWindowIndex].code
+            : "--"
+        }}
+      </el-form-item>
+      <el-form-item label="分屏">
+        <el-radio-group v-model="splitNum" @change="arrangeWindow">
+          <el-radio-button label="1">1x1</el-radio-button>
+          <el-radio-button label="2">2x2</el-radio-button>
+          <el-radio-button label="3">3x3</el-radio-button>
+          <el-radio-button label="4">4x4</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="预览">
+        <el-button id="btn-realplay" @click="realplay">开始预览</el-button>
+        <el-button id="btn-realplay-stop" @click="stopPlay">停止预览</el-button>
+        <el-button id="btn-stopall" @click="stopAllPlay"
+          >停止全部窗口</el-button
+        >
+      </el-form-item>
+      <el-form-item label="回放时间">
+        <e-date-picker
+          show-time
+          placeholder="开始时间"
+          format="YYYY-MM-DD HH:mm:ss"
+          v-model="playback.startTime"
+          :value-format="playback.valueFormat"
+        >
+        </e-date-picker>
+        <e-date-picker
+          show-time
+          placeholder="结束时间"
+          format="YYYY-MM-DD HH:mm:ss"
+          v-model="playback.endTime"
+          :value-format="playback.valueFormat"
+        >
+        </e-date-picker>
+      </el-form-item>
+      <el-form-item label="回放">
+        <el-button id="btn-playback" @click="playbackQuery">开始回放</el-button>
+        <el-button id="btn-playback-pause" @click="playbackPause"
+          >暂停</el-button
+        >
+        <el-button id="btn-playback-sesume" @click="playbackResume"
+          >恢复</el-button
+        >
+        <el-button id="btn-playback-stop" @click="stopPlay">停止回放</el-button>
+      </el-form-item>
+      <el-form-item label="抓图">
+        <el-button id="btn-capture-jpeg" @click="capture('JPEG')"
+          >抓取JPEG</el-button
+        >
+        <el-button id="btn-capture-bmp" @click="capture('BMP')"
+          >抓取BMP</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
-const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+const MSE_IS_SUPPORT = !!window.MediaSource; // 是否支持mse
 // import "@/static/js/h5player.min.js"
+import {
+  queryLivePreview,
+  queryLiveBack,
+} from "@/api/wirelessintrusion/wirelessintrusion";
 export default {
-    data() {
+  props: {
-        return {
+    list: {
-            player: null,
+      // cameraCode列表
-            splitNum: 1,
+      type: Array,
-            mseSupport: MSE_IS_SUPPORT,
+      default: () => [],
-            // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
+    },
-            tabActive: 'decoder',
+  },
-            urls: {
+  data() {
-                realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
+    return {
-                talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
+      player: null,
-                playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
+      playUrlList: [], //预览播放地址
-            },
+      splitNum: 1,
-            playback: {
+      mseSupport: MSE_IS_SUPPORT,
-                startTime: '2021-07-26T00:00:00',
+      // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
-                endTime: '2021-07-26T23:59:59',
+      tabActive: "decoder",
-                valueFormat: '',
+      urls: {
-                seekStart: '2021-07-26T12:00:00',
+        realplay: "ws://10.19.147.22:559/EUrl/q2jQie4",
-                rate: ''
+        talk: "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
-            },
+        playback:
-            muted: true,
+          "wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S",
-            volume: 50,
+      },
-            volumeOnSvg: {
+      playback: {
-                template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
+        startTime: "2021-07-26T00:00:00",
-            },
+        endTime: "2021-07-26T23:59:59",
-            volumeOffSvg: {
+        valueFormat: "",
-                template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
+        seekStart: "2021-07-26T12:00:00",
-            },
+        rate: "",
-            recordStartState: 0,
+      },
-            recordStartText: '录像'
+      muted: true,
+      volume: 50,
+      volumeOnSvg: {
+        template:
+          '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>',
+      },
+      volumeOffSvg: {
+        template:
+          '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>',
+      },
+      recordStartState: 0,
+      recordStartText: "录像",
+    };
+  },
+  created() {
+    // 海康h5插件初始化
+    setTimeout(() => {
+      this.init();
+      this.createPlayer();
+      this.arrangeWindow();
+    });
+  },
+  methods: {
+    // 海康视频初始化加载
+    init() {
+      // 设置播放容器的宽高并监听窗口大小变化
+      window.addEventListener("resize", () => {
+        this.player.JS_Resize();
+      });
+    },
+    createPlayer() {
+      this.player = new window.JSPlugin({
+        szId: "player",
+        szBasePath: "/js/", //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
+        iMaxSplit: 4,
+        iCurrentSplit: 2,
+        openDebug: true,
+        oStyle: {
+          borderSelect: "#FFCC00",
+        },
+      });
+      let _this = this;
+      // 事件回调绑定
+      this.player.JS_SetWindowControlCallback({
+        windowEventSelect: function (iWndIndex) {
+          //插件选中窗口回调
+          console.log("windowSelect callback: ", iWndIndex);
+        },
+        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
+          //插件错误回调
+          console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
+        },
+        windowEventOver: function (iWndIndex) {
+          //鼠标移过回调
+          //console.log(iWndIndex);
+        },
+        windowEventOut: function (iWndIndex) {
+          //鼠标移出回调
+          //console.log(iWndIndex);
+        },
+        windowEventUp: function (iWndIndex) {
+          //鼠标mouseup事件回调
+          //console.log(iWndIndex);
+        },
+        windowFullCcreenChange: function (bFull) {
+          //全屏切换回调
+          console.log("fullScreen callback: ", bFull);
+        },
+        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
+          //首帧显示回调
+          console.log(
+            "firstFrame loaded callback: ",
+            iWndIndex,
+            iWidth,
+            iHeight
+          );
+        },
+        performanceLack: function () {
+          //性能不足回调
+          console.log("performanceLack callback: ");
+        },
+      });
+      //   _this.realplay();
+      this.queryLive();
+    },
+    arrangeWindow() {
+      this.splitNum =
+        this.list.length > 1
+          ? 2
+          : this.list.length > 4
+          ? 3
+          : this.list.length > 9
+          ? 4
+          : 4;
+      const splitNum = this.splitNum;
+      this.player.JS_ArrangeWindow(splitNum).then(
+        () => {
+          console.log(`arrangeWindow to ${splitNum}x${splitNum} success`);
+        },
+        (e) => {
+          console.error(e);
         }
+      );
     },
-    created() {
+    // 初始化结束
-        // 海康h5插件初始化
+    // 视频预览
-        setTimeout(() => {
+    realplay(index, playUrl) {
-            this.init()
+      if (this.playUrlList.length === 0) {
-            this.createPlayer()
+        this.$message.warning("当前没有可播放的摄像头");
-            this.arrangeWindow()
+        return;
-        })
+      }
+      // this.mode = 0  //解码方式：0普通模式 1高级模式
+      // const { player, mode, urls } = this,
+
+      // index = player.currentWindowIndex
+      // // playURL = this.realplay
+      // console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
+      // player.JS_Play(playURL, { playURL, mode }, index1).then(
+      // () => {
+      //     console.log('realplay success')
+      // },
+      // e => { console.error(e) }
+      // )
+      if (this.player === null) return;
+      // let { mode, player } = this;
+      //   let index = this.player.currentWindowIndex;
+      let mode = 0;
+      //   let playURL = this.playUrlList[player.currentWindowIndex].url;
+
+      console.log(playURL, { playURL, mode }, index);
+      this.player.JS_Play(playURL, { playURL, mode }, index).then(
+        () => {
+          // 播放成功回调
+          console.log("播放成功");
+        },
+        (err) => {
+          console.log("播放失败", err);
+        }
+      );
     },
-    methods: {
+    // 关闭所有视频
-        // 海康视频初始化加载
+    stopAllPlay() {
-        init () {
+      this.player.JS_StopRealPlayAll().then(
-            // 设置播放容器的宽高并监听窗口大小变化
+        () => {
-            window.addEventListener('resize', () => {
+          this.playback.rate = 0;
-            this.player.JS_Resize()
+          console.log("stopAllPlay success");
-            })
+          this.closeVideoTree();
-        },
+        },
-        createPlayer () {
+        (e) => {
-            this.player = new window.JSPlugin({
+          console.error(e);
-            szId: 'player',
+        }
-            szBasePath: "/js/",  //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
+      );
-            iMaxSplit: 4,
+    },
-            iCurrentSplit: 2,
+    // 关闭单个视频
-            openDebug: true,
+    stopPlay() {
-            oStyle: {
+      this.player.JS_Stop().then(
-                borderSelect: '#FFCC00',
+        () => {
-            }
+          this.playback.rate = 0;
-            })
+          console.log("stop realplay success");
-            let _this = this
+          // this.closeVideoTree()
-            // 事件回调绑定
+          const index = this.player.currentWindowIndex;
-            this.player.JS_SetWindowControlCallback({
+          this.selectAisle(this.videoList[index], index);
-                windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+        },
-                    console.log('windowSelect callback: ', iWndIndex);
+        (e) => {
-                },
+          console.error(e);
-                pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+        }
-                    console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+      );
-                },
+    },
-                windowEventOver: function (iWndIndex) {  //鼠标移过回调
+    capture(imageType) {
-                    //console.log(iWndIndex);
+      let player = this.player,
-                },
+        index = player.currentWindowIndex;
-                windowEventOut: function (iWndIndex) {  //鼠标移出回调
-                    //console.log(iWndIndex);
-                },
-                windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
-                    //console.log(iWndIndex);
-                },
-                windowFullCcreenChange: function (bFull) {  //全屏切换回调
-                    console.log('fullScreen callback: ', bFull);
-                },
-                firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
-                    console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
-                },
-                performanceLack: function () {  //性能不足回调
-                    console.log('performanceLack callback: ');
-                }
-            });
-                _this.realplay()
 
+      player.JS_CapturePicture(index, "img", imageType).then(
+        () => {
+          console.log("capture success", imageType);
         },
-        arrangeWindow () {
+        (e) => {
-            const splitNum = this.splitNum
+          console.error(e);
-            this.player.JS_ArrangeWindow(splitNum).then(
+        }
-            () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
+      );
-                e => { console.error(e) }
+    },
-            )
+    /**
-        },
+     * 视频流查询
-        // 初始化结束
+     */
-        // 视频预览
+    //实时监控播放地址查询
-        realplay () {
+    queryLive() {
-            // this.mode = 0  //解码方式：0普通模式 1高级模式
+      console.log("视频流查询", this.list);
-            // const { player, mode, urls } = this,
+      let playUrlList = [];
+      this.list.map((code, index) => {
+        // console.log('code ===>',code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code)
+        queryLivePreview({ cameraIndexCode: code.tags ? JSON.parse(code.tags).cameraIndexCode : code.code }).then((res) => {
+          console.log('res ====>',res)
+          if (res.data.code === 0 || res.data.code == 200) {
+            playUrlList.push({ code: code, url: res.data.url });
+            this.playUrlList = playUrlList;
+            this.realplay(index, res.data.url);
+          }
+        });
+      });
+    },
 
-            // index = player.currentWindowIndex
+    /* 回放 */
-            // // playURL = this.realplay
+    playbackStart() {
-            // console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
+      let { player, mode, playback } = this,
-            // player.JS_Play(playURL, { playURL, mode }, index1).then(
+        index = player.currentWindowIndex,
-            // () => {
+        { startTime, endTime } = playback;
-            //     console.log('realplay success')
+      let playUrl = this.playUrlList[index].playback;
-            // },
+      startTime += "Z";
-            // e => { console.error(e) }
+      endTime += "Z";
-            // )
-            if (this.player === null) return;
-            // let { mode, player } = this;
-            let index =  0;
-            let mode = 0
-            let playURL = 'ws://10.19.147.22:559/EUrl/q2jQie4';
 
-            console.log(playURL, { playURL, mode }, index);
+      player
-            this.player.JS_Play(playURL, { playURL, mode }, index).then(
+        .JS_Play(playURL, { playURL, mode }, index, startTime, endTime)
-                () => {
+        .then(
-                // 播放成功回调
+          () => {
-                console.log("播放成功");
+            console.log("playbackStart success");
-                },
+            this.playback.rate = 1;
-                (err) => {
+          },
-                console.log("播放失败", err);
+          (e) => {
-                }
+            console.error(e);
-            );
+          }
-        },
+        );
-        // 关闭所有视频
-        stopAllPlay () {
-            this.player.JS_StopRealPlayAll().then(
-            () => {
-                this.playback.rate = 0
-                console.log('stopAllPlay success')
-                this.closeVideoTree()
-            },
-            e => { console.error(e) }
-            )
-        },
-        // 关闭单个视频
-        stopPlay () {
-            this.player.JS_Stop().then(
-            () => {
-                this.playback.rate = 0
-                console.log('stop realplay success')
-                // this.closeVideoTree()
-                const index = this.player.currentWindowIndex
-                this.selectAisle(this.videoList[index], index)
-                },
-                e => { console.error(e) }
-            )
-            }
     },
-}
+    playbackPause() {
+      this.player.JS_Pause().then(
+        () => {
+          console.log("playbackPause success");
+        },
+        (e) => {
+          console.error(e);
+        }
+      );
+    },
+    playbackResume() {
+      this.player.JS_Resume().then(
+        () => {
+          console.log("playbackResume success");
+        },
+        (e) => {
+          console.error(e);
+        }
+      );
+    },
+    /* 回放 */
+    playbackQuery() {
+      if (this.playUrlList.length === 0) {
+        this.$message.warning("当前没有可播放的摄像头");
+        return;
+      }
+      if (
+        this.playUrlList[this.player.currentWindowIndex].playback != undefined
+      ) {
+        this.playbackStart();
+        return;
+      }
+      queryLiveBack({
+        cameraIndexCode: this.playUrlList[this.currentWindowIndex].code,
+        beginTime: this.playback.startTime,
+        endTime: this.playback.endTime,
+      }).then((res) => {
+        if (res.data.code === 0 || res.data.code == 200) {
+          this.playUrlList[this.player.currentWindowIndex].playback =
+            res.data.url;
+          this.playbackStart();
+        }
+      });
+    },
+  },
+};
 </script>
 
-<style>
+<style></style>
-
-</style>

src/views/components/h5Player/player1.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id='player'></div>
+</template>
+
+<script>
+const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
+const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
+// import "@/static/js/h5player.min.js"
+export default {
+    data() {
+        return {
+            player: null,
+            splitNum: 1,
+            mseSupport: MSE_IS_SUPPORT,
+            // tabActive: MSE_IS_SUPPORT ? 'mse' : 'decoder',
+            tabActive: 'decoder',
+            urls: {
+                realplay: 'ws://10.19.147.22:559/EUrl/q2jQie4',
+                talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
+                playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
+            },
+            playback: {
+                startTime: '2021-07-26T00:00:00',
+                endTime: '2021-07-26T23:59:59',
+                valueFormat: '',
+                seekStart: '2021-07-26T12:00:00',
+                rate: ''
+            },
+            muted: true,
+            volume: 50,
+            volumeOnSvg: {
+                template: '<svg t="1624453273744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1421" width="200" height="200"><path d="M597.994667 138.005333q130.005333 28.010667 213.994667 132.992t84.010667 241.002667-84.010667 241.002667-213.994667 132.992l0-88q93.994667-28.010667 153.002667-106.005333t59.008-180.010667-59.008-180.010667-153.002667-106.005333l0-88zM704 512q0 120-106.005333 172.010667l0-344q106.005333 52.010667 106.005333 172.010667zM128 384l170.005333 0 213.994667-213.994667 0 684.010667-213.994667-213.994667-170.005333 0 0-256z" p-id="1422"></path></svg>'
+            },
+            volumeOffSvg: {
+                template: '<svg t="1624453193279" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" width="200" height="200"><path d="M512 170.005333l0 180.010667-90.005333-90.005333zM181.994667 128l714.005333 714.005333-53.994667 53.994667-88-88q-74.005333 58.005333-156.010667 77.994667l0-88q50.005333-13.994667 96-50.005333l-181.994667-181.994667 0 288-213.994667-213.994667-170.005333 0 0-256 202.005333 0-202.005333-202.005333zM810.005333 512q0-101.994667-59.008-180.010667t-153.002667-106.005333l0-88q130.005333 28.010667 213.994667 132.992t84.010667 241.002667q0 96-44.010667 178.005333l-64-66.005333q21.994667-53.994667 21.994667-112zM704 512q0 18.005333-2.005333 26.005333l-104-104 0-93.994667q106.005333 52.010667 106.005333 172.010667z" p-id="9148"></path></svg>'
+            },
+            recordStartState: 0,
+            recordStartText: '录像'
+        }
+    },
+    created() {
+        // 海康h5插件初始化
+        setTimeout(() => {
+            this.init()
+            this.createPlayer()
+            this.arrangeWindow()
+        })
+    },
+    methods: {
+        // 海康视频初始化加载
+        init () {
+            // 设置播放容器的宽高并监听窗口大小变化
+            window.addEventListener('resize', () => {
+            this.player.JS_Resize()
+            })
+        },
+        createPlayer () {
+            this.player = new window.JSPlugin({
+            szId: 'player',
+            szBasePath: "/js/",  //引入静态资源地址，我这里静态资源在public/js文件存放，所以设置为js
+            iMaxSplit: 4,
+            iCurrentSplit: 2,
+            openDebug: true,
+            oStyle: {
+                borderSelect: '#FFCC00',
+            }
+            })
+            let _this = this
+            // 事件回调绑定
+            this.player.JS_SetWindowControlCallback({
+                windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+                    console.log('windowSelect callback: ', iWndIndex);
+                },
+                pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+                    console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
+                },
+                windowEventOver: function (iWndIndex) {  //鼠标移过回调
+                    //console.log(iWndIndex);
+                },
+                windowEventOut: function (iWndIndex) {  //鼠标移出回调
+                    //console.log(iWndIndex);
+                },
+                windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+                    //console.log(iWndIndex);
+                },
+                windowFullCcreenChange: function (bFull) {  //全屏切换回调
+                    console.log('fullScreen callback: ', bFull);
+                },
+                firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+                    console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
+                },
+                performanceLack: function () {  //性能不足回调
+                    console.log('performanceLack callback: ');
+                }
+            });
+                _this.realplay()
+
+        },
+        arrangeWindow () {
+            const splitNum = this.splitNum
+            this.player.JS_ArrangeWindow(splitNum).then(
+            () => { console.log(`arrangeWindow to ${splitNum}x${splitNum} success`) },
+                e => { console.error(e) }
+            )
+        },
+        // 初始化结束
+        // 视频预览
+        realplay () {
+            // this.mode = 0  //解码方式：0普通模式 1高级模式
+            // const { player, mode, urls } = this,
+
+            // index = player.currentWindowIndex
+            // // playURL = this.realplay
+            // console.log('playURL ==>',playURL,'mode ===>',mode,'index1 ===>',index1)
+            // player.JS_Play(playURL, { playURL, mode }, index1).then(
+            // () => {
+            //     console.log('realplay success')
+            // },
+            // e => { console.error(e) }
+            // )
+            if (this.player === null) return;
+            // let { mode, player } = this;
+            let index =  0;
+            let mode = 0
+            let playURL = 'ws://10.19.147.22:559/EUrl/q2jQie4';
+        
+            console.log(playURL, { playURL, mode }, index);
+            this.player.JS_Play(playURL, { playURL, mode }, index).then(
+                () => {
+                // 播放成功回调
+                console.log("播放成功");
+                },
+                (err) => {
+                console.log("播放失败", err);
+                }
+            );
+        },
+        // 关闭所有视频
+        stopAllPlay () {
+            this.player.JS_StopRealPlayAll().then(
+            () => {
+                this.playback.rate = 0
+                console.log('stopAllPlay success')
+                this.closeVideoTree()
+            },
+            e => { console.error(e) }
+            )
+        },
+        // 关闭单个视频
+        stopPlay () {
+            this.player.JS_Stop().then(
+            () => {
+                this.playback.rate = 0
+                console.log('stop realplay success')
+                // this.closeVideoTree()
+                const index = this.player.currentWindowIndex
+                this.selectAisle(this.videoList[index], index)
+                },
+                e => { console.error(e) }
+            )
+            }
+    },
+}
+</script>
+
+<style>
+
+</style>

src/views/wirelessintrusion/warn/record.vue

@@ -31,11 +31,12 @@
 
       <div class="video_box">
         <el-row :gutter="20">
-          <el-col :span="6" v-for="item in videoData" :key="item.id">
+          <!-- <el-col :span="6" v-for="item in videoData" :key="item.id">
             <VideoPlayer :name="item.name" :id="item.id" :code="renderCode(item.tags)"
               :url="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'"
               :playbackUrl="'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'" />
-          </el-col>
+          </el-col> -->
+            <player :list="videoData"></player>
         </el-row>
       </div>
     </el-dialog>
@@ -67,10 +68,12 @@ import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import func from "@/util/func";
 import VideoPlayer from "../../components/video/video"
+import player from "../../components/h5Player/player"
 
 export default {
   components: {
-    VideoPlayer
+    VideoPlayer,
+    player
   },
   data() {
     return {