播放器增加悬浮按钮案例

vue2/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

vue2/src/views/player/demo.js

@@ -17,7 +17,9 @@ export default `
       :obstacleData="obstacleData"
       :isCenter="true"
       :size="1"
-    ></MMCPlayer>
+    >
+      <el-button class="test-btn">测试悬浮按钮</el-button>
+    </MMCPlayer>
   </div>
 </template>
 
@@ -28,34 +30,29 @@ export default {
       streamOptions: [
         {
           label: "flv",
-          brand: "flv",     //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
-          url:
-            "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
+          brand: "flv", //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
+          url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
         },
         {
           label: "liveNVR",
-          brand: 'liveNVR',
-          url:
-            "http://pull.mmcuav.cn/live/1680771689946.m3u8",
-          fpvUrl:     //只有liveNVR支持fpvUrl
-            "webrtc://live.mmcuav.cn/hls/shouguang01",
+          brand: "liveNVR",
+          url: "http://pull.mmcuav.cn/live/1680771689946.m3u8",
+          //只有liveNVR支持fpvUrl
+          fpvUrl: "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
         {
           label: "srs",
-          brand: 'srs',
-          url:
-            "webrtc://live.mmcuav.cn/hls/shouguang01",
+          brand: "srs",
+          url: "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
         {
           label: "QingLiu",
-          url:
-            "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
+          url: "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
         },
         {
           label: "WebRtc",
-          brand: 'webrtc',
-          url:
-            "webrtc://live.mmcuav.cn/hls/shouguang01",
+          brand: "webrtc",
+          url: "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
       ],
       obstacleData: null,
@@ -87,5 +84,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.test-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
 </style>
 `;
\ No newline at end of file

vue2/src/views/player/demo.vue

@@ -7,7 +7,9 @@
       :obstacleData="obstacleData"
       :isCenter="true"
       :size="1"
-    ></MMCPlayer>
+    >
+      <el-button class="test-btn">测试悬浮按钮</el-button>
+    </MMCPlayer>
   </div>
 </template>
 
@@ -18,34 +20,29 @@ export default {
       streamOptions: [
         {
           label: "flv",
-          brand: "flv",     //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
-          url:
-            "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
+          brand: "flv", //支持以下品牌播放器"srs|fly|liveNVR|QingLiu|webrtc", 为空则根据url判断使用liveNVR或QingLiu
+          url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
         },
         {
           label: "liveNVR",
-          brand: 'liveNVR',
-          url:
-            "http://pull.mmcuav.cn/live/1680771689946.m3u8",
-          fpvUrl:     //只有liveNVR支持fpvUrl
-            "webrtc://live.mmcuav.cn/hls/shouguang01",
+          brand: "liveNVR",
+          url: "http://pull.mmcuav.cn/live/1680771689946.m3u8",
+          //只有liveNVR支持fpvUrl
+          fpvUrl: "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
         {
           label: "srs",
-          brand: 'srs',
-          url:
-            "webrtc://live.mmcuav.cn/hls/shouguang01",
+          brand: "srs",
+          url: "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
         {
           label: "QingLiu",
-          url:
-            "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
+          url: "pzsp://pzlink999bju.powzamedia.com:7788/live/ld/trans/test/mlinkm/channel1?ndselect=2&linkmode=8&fstusrd=1&us=1&wsinfo=pzlink999bju.powzamedia.com-13000&only-video=1&rct=500",
         },
         {
           label: "WebRtc",
-          brand: 'webrtc',
-          url:
-            "webrtc://live.mmcuav.cn/hls/shouguang01",
+          brand: "webrtc",
+          url: "webrtc://live.mmcuav.cn/hls/shouguang01",
         },
       ],
       obstacleData: null,
@@ -77,4 +74,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.test-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
 </style>
\ No newline at end of file