1

.env

@@ -1,3 +1,3 @@
 VUE_APP_AXIOS_BASE_URL = ''
 VUE_APP_ROUTER="/platlive"
-VUE_APP_LIVE_URL='rtmp://124.71.143.119/live/'
+VUE_APP_LIVE_URL='http://124.71.143.119/live?port=1935&app=live&stream='

package.json

@@ -15,6 +15,7 @@
     "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
     "file-saver": "^2.0.2",
+    "flv.js": "^1.5.0",
     "jsonwebtoken": "^8.5.1",
     "loadsh": "0.0.4",
     "moment": "^2.26.0",

src/views/hall/direct.vue

@@ -56,8 +56,7 @@
                 </el-col>
                 <el-col :span="24" :class="[dockInfo.room_id == '1006' ? 'leftvideos' : 'leftvideo']">
                   <span v-if="dockInfo.room_id == '1006'">
-                    <!-- <div class="h5video" id="videoDiv" style="height:400px;"></div> -->
-                    <div id="videoDiv" class="h5video active"></div>
+                    <video id="videoElement" controls autoplay class="h5video"></video>
                   </span>
                   <span v-else>
                     <el-col :span="24" class="videoTop">
@@ -350,6 +349,7 @@ const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
 
 import moment from 'moment';
 import _ from 'loadsh';
+import flvjs from 'flv.js';
 export default {
   name: 'hall',
   props: {},
@@ -422,17 +422,17 @@ export default {
   },
   methods: {
     searchLive() {
+      let player = document.getElementById('videoElement');
       let rmtpUrl = `${process.env.VUE_APP_LIVE_URL + this.dockInfo.room_id}`;
-      setTimeout(function() {
-        var videoObjects = {
-          container: '#videoDiv',
-          variable: 'player',
-          autoplay: true,
-          live: true,
-          video: rmtpUrl,
-        };
-        let player = new ckplayer(videoObjects);
-      }, 2);
+      if (flvjs.isSupported()) {
+        var flvPlayer = flvjs.createPlayer({
+          isLive: true,
+          type: 'flv',
+          url: rmtpUrl,
+        });
+        flvPlayer.attachMediaElement(player);
+        flvPlayer.load(); //加载
+      }
     },
     // 展会
     ...dock({ dockQuery: 'query', dockFetch: 'fetch', goodsquery: 'goodsquery' }),
@@ -712,7 +712,9 @@ export default {
         }
       }
       .h5video {
+        width: 100%;
         height: 400px;
+        background: #000;
       }
       .leftvideo {
         height: 410px;

src/views/superAdminCenter/monitor/index.vue

@@ -7,7 +7,7 @@
             <span>[{{ item.room_id }}]</span>{{ item.title }}
           </el-col>
           <el-col :span="24" class="video">
-            <div class="h5video" :id="item.room_id"></div>
+            <video :id="item.room_id" controls class="h5video"></video>
           </el-col>
           <el-col :span="24" class="btn">
             <el-button type="danger" size="mini">强制关闭直播</el-button>
@@ -21,6 +21,7 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: dock } = createNamespacedHelpers('dock');
+import flvjs from 'flv.js';
 export default {
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -31,13 +32,11 @@ export default {
   data: function() {
     return {
       list: [],
+      datasss: [],
     };
   },
   async created() {
     await this.search();
-    this.$nextTick(() => {
-      this.searchLive();
-    });
   },
   methods: {
     ...dock(['query']),
@@ -48,44 +47,30 @@ export default {
       }
     },
     searchLive() {
-      var envUrl = process.env.VUE_APP_LIVE_URL;
       for (const val of this.list) {
-        setTimeout(function() {
-          var videoObjects = {
-            container: `#${val.room_id}`,
-            variable: 'player',
-            autoplay: true,
-            live: true,
-            video: envUrl + val.room_id,
-          };
-          let player = new ckplayer(videoObjects);
-        }, 2);
+        let player = document.getElementById(val.room_id);
+        let rmtpUrl = `${process.env.VUE_APP_LIVE_URL + val.room_id}`;
+        if (flvjs.isSupported()) {
+          var flvPlayer = flvjs.createPlayer({
+            isLive: true,
+            type: 'flv',
+            url: rmtpUrl,
+          });
+          flvPlayer.attachMediaElement(player);
+          flvPlayer.load(); //加载
+          this.datasss.push(flvPlayer);
+        }
       }
-      // var swfStr = '/platlive/swf/flowplayer-3.2.18.swf';
-      // var obj_1 = {
-      //   clip: {
-      //     provider: 'rtmp',
-      //     bufferLength: 0,
-      //     bufferTime: 0,
-      //     autoPlay: true,
-      //     live: true,
-      //   },
-      //   plugins: {
-      //     rtmp: {
-      //       url: 'flowplayer.rtmp-3.2.13.swf',
-      //     },
-      //   },
-      // };
-      // for (const val of this.list) {
-      //   val.url = envUrl + val.room_id;
-      //   var videoRoom = document.getElementById(val.room_id);
-      //   videoRoom.setAttribute('data-rtmp', val.url);
-      //   videoRoom.setAttribute('href', val.url);
-      //   const obj_2 = JSON.parse(JSON.stringify(obj_1));
-      //   obj_2.plugins.rtmp.netConnectionUrl = val.url;
-      //   flowplayer(val.room_id, swfStr, obj_2);
-      // }
     },
+    get() {
+      if (this.list.length > 0) {
+        clearInterval(this.timer);
+        this.searchLive();
+      }
+    },
+  },
+  mounted() {
+    this.timer = setInterval(this.get, 1000);
   },
   computed: {
     ...mapState(['user']),