西海岸视频播放

front/src/supermap/map-showResource.js

@@ -66,18 +66,18 @@ function createMarkerClusterLayer(layerClassName, mapObj) {
     } else {
         // 使用默认图标
         markerClusterLayer = L.markerClusterGroup({
-            iconCreateFunction(cluster) {
-                const markers = cluster.getAllChildMarkers()
-                let n = 0
-                for (let i = 0; i < markers.length; i++) {
-                    n += markers[i].number
-                }
-                return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
-            },
+            // iconCreateFunction(cluster) {
+            //     const markers = cluster.getAllChildMarkers()
+            //     let n = 0
+            //     for (let i = 0; i < markers.length; i++) {
+            //         n += markers[i].number
+            //     }
+            //     return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
+            // },
             // 是否允许指定 PolylineOptions 样式 spider
             spiderfyOnMaxZoom: false,
             // 是否显示标记的边界
-            showCoverageOnHover: false,
+            showCoverageOnHover: true,
             // 是否点击展开
             zoomToBoundsOnClick: true,
             maxClusterRadius: 80,

front/src/views/home/components/H5Player.vue

@@ -18,11 +18,11 @@
       index: {
         type: Number,
         default: 0,
-     },
-     stopFlag:{
-       type: Boolean, 
-        default: false 
-     }
+      },
+      stopFlag: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -102,6 +102,7 @@
             borderSelect: '#FFCC00',
           },
         })
+        let that = this
         // 事件回调绑定
         this.player.JS_SetWindowControlCallback({
           windowEventSelect: function (iWndIndex) {
@@ -111,6 +112,7 @@
           pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
             //插件错误回调
             console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+            message.error('取流异常,请稍后尝试')
           },
           windowEventOver: function (iWndIndex) {
             //鼠标移过回调
@@ -136,6 +138,8 @@
               iWidth,
               iHeight
             )
+            // 首帧绘制完成后停止
+            that.pausePlay(iWndIndex)
           },
           performanceLack: function () {
             //性能不足回调
@@ -162,15 +166,29 @@
           index = player.currentWindowIndex
         // playURL = this.realplay
         console.log('视频播放地址', playURL)
-        player.JS_Play(playURL, { playURL, mode }, index1).then(
-          () => {
-            console.log('realplay success')
-          },
-          (e) => {
-            console.error(e)
-            // message.error('请联系视频提供方!')
-          }
-        )
+        // const startTime = {
+        //   startTime: ,
+        // }
+        // const endTime = {
+        //   endTime: ,
+        // }
+        player
+          .JS_Play(
+            playURL,
+            { playURL, mode },
+            index1,
+            '2022-11-22T10:00:00Z',
+            '2022-11-22T11:00:00Z'
+          )
+          .then(
+            () => {
+              console.log('realplay success')
+            },
+            (e) => {
+              console.error(e)
+              // message.error('错误代码:' + e)
+            }
+          )
       },
       // 关闭所有视频
       stopAllPlay() {
@@ -185,15 +203,11 @@
           }
         )
       },
-      // 关闭单个视频
-      stopPlay() {
-        this.player.JS_Stop().then(
+      // 暂停单个视频
+      pausePlay(index) {
+        this.player.JS_Pause(index).then(
           () => {
-            this.playback.rate = 0
-            console.log('stop realplay success')
-            // this.closeVideoTree()
-            const index = this.player.currentWindowIndex
-            this.selectAisle(this.videoList[index], index)
+            console.log('暂停成功')
           },
           (e) => {
             console.error(e)
@@ -213,14 +227,14 @@
     width: 100%;
     height: 100%;
     position: relative;
-    .play-button{
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    position: absolute;
-    left: 350px;
-    z-index: 9;
-    top: 240px;
+    .play-button {
+      width: 100px;
+      height: 100px;
+      background-color: red;
+      position: absolute;
+      left: 350px;
+      z-index: 9;
+      top: 240px;
     }
   }
 </style>