西海岸视频播放

front/src/supermap/map-showResource.js

@@ -66,18 +66,18 @@ function createMarkerClusterLayer(layerClassName, mapObj) {
     } else {
         // 使用默认图标
         markerClusterLayer = L.markerClusterGroup({
-            iconCreateFunction(cluster) {
+            // iconCreateFunction(cluster) {
-                const markers = cluster.getAllChildMarkers()
+            //     const markers = cluster.getAllChildMarkers()
-                let n = 0
+            //     let n = 0
-                for (let i = 0; i < markers.length; i++) {
+            //     for (let i = 0; i < markers.length; i++) {
-                    n += markers[i].number
+            //         n += markers[i].number
-                }
+            //     }
-                return L.divIcon({ html: markers.length, className: "topic-marker-cluster-video" })
+            //     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

@@ -19,10 +19,10 @@
         type: Number,
         default: 0,
       },
-     stopFlag:{
+      stopFlag: {
         type: Boolean,
-        default: false 
+        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,13 +166,27 @@
           index = player.currentWindowIndex
         // playURL = this.realplay
         console.log('视频播放地址', playURL)
-        player.JS_Play(playURL, { playURL, mode }, index1).then(
+        // 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('请联系视频提供方!')
+              // message.error('错误代码:' + e)
             }
           )
       },
@@ -185,15 +203,11 @@
           }
         )
       },
-      // 关闭单个视频
+      // 暂停单个视频
-      stopPlay() {
+      pausePlay(index) {
-        this.player.JS_Stop().then(
+        this.player.JS_Pause(index).then(
           () => {
-            this.playback.rate = 0
+            console.log('暂停成功')
-            console.log('stop realplay success')
-            // this.closeVideoTree()
-            const index = this.player.currentWindowIndex
-            this.selectAisle(this.videoList[index], index)
           },
           (e) => {
             console.error(e)
@@ -213,7 +227,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    .play-button{
+    .play-button {
       width: 100px;
       height: 100px;
       background-color: red;