1

.env

@@ -1,3 +1,4 @@
 VUE_APP_AXIOS_BASE_URL = ''
 VUE_APP_ROUTER="platlive"
 VUE_APP_HOST="http://broadcast.waityou24.cn"
+VUE_APP_LIVE_URL='http://101.36.174.25:8888/live?port=1935&app=live&stream='

package-lock.json

@@ -4774,6 +4774,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/escalade/download/escalade-3.1.1.tgz?cache=0&sync_timestamp=1602567334507&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescalade%2Fdownload%2Fescalade-3.1.1.tgz",
@@ -5542,6 +5547,15 @@
         "readable-stream": "^2.3.6"
       }
     },
+    "flv.js": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/flv.js/-/flv.js-1.5.0.tgz",
+      "integrity": "sha512-7tFwccqkFXpA7RIED0KvuNny2qVnpuGc5nTGsRpzrCT+qtwIaZyciK5UgyvgtlAMYaPFzYS0wdI92JiSBKOyXw==",
+      "requires": {
+        "es6-promise": "^4.2.5",
+        "webworkify": "^1.5.0"
+      }
+    },
     "follow-redirects": {
       "version": "1.13.2",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.2.tgz",
@@ -7195,6 +7209,11 @@
         }
       }
     },
+    "loadsh": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/loadsh/-/loadsh-0.0.4.tgz",
+      "integrity": "sha512-U+wLL8InpfRalWrr+0SuhWgGt10M4OyAk6G8xCYo2rwpiHtxZkWiFpjei0vO463ghW8LPCdhqQxXlMy2qicAEw=="
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz?cache=0&sync_timestamp=1597082033698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flocate-path%2Fdownload%2Flocate-path-5.0.0.tgz",
@@ -12220,6 +12239,11 @@
       "integrity": "sha1-f4RzvIOd/YdgituV1+sHUhFXikI=",
       "dev": true
     },
+    "webworkify": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz",
+      "integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g=="
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/which/download/which-1.3.1.tgz",

package.json

@@ -13,7 +13,9 @@
     "core-js": "^3.6.5",
     "echarts": "^5.0.2",
     "element-ui": "^2.15.0",
+    "flv.js": "^1.5.0",
     "jsonwebtoken": "^8.5.1",
+    "loadsh": "0.0.4",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "naf-core": "^0.1.2",

public/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="./js/flowplayer-3.2.13.min.js"></script>
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
       /*修改滚动条样式*/

src/views/achieveLive/detail.vue

@@ -9,7 +9,8 @@
           <div class="w_1200">
             <el-col :span="24" class="two_1">
               <el-col :span="12" class="left">
-                <video-data :info="info"></video-data>
+                <!-- <video-data :info="info"></video-data> -->
+                <video-live :info="info"></video-live>
               </el-col>
               <el-col :span="12" class="right">
                 <imgtext-data></imgtext-data>
@@ -49,6 +50,7 @@
 import foot from '@common/src/components/common/foot.vue';
 import top from './detail/top.vue';
 import videoData from './detail/videoData.vue';
+import videoLive from './detail/videoLive.vue';
 import imgtextData from './detail/imgtextData.vue';
 import productData from './detail/productData.vue';
 import expertData from './detail/expertData.vue';
@@ -63,7 +65,8 @@ export default {
   components: {
     foot,
     top,
-    videoData,
+    // videoData,
+    videoLive,
     imgtextData,
     productData,
     expertData,

src/views/achieveLive/detail/videoLive.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="videoLive">
+    <el-row>
+      <el-col :span="24" class="main">
+        视频直播
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'videoLive',
+  props: {
+    info: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .h5video {
+    width: 100%;
+    height: 480px;
+  }
+}
+</style>

src/views/twoweb/achieveLive/detail.vue

@@ -9,7 +9,8 @@
           <div class="w_1200">
             <el-col :span="24" class="two_1">
               <el-col :span="12" class="left">
-                <video-data :info="info"></video-data>
+                <!-- <video-data :info="info"></video-data> -->
+                <video-live></video-live>
               </el-col>
               <el-col :span="12" class="right">
                 <imgtext-data></imgtext-data>
@@ -49,6 +50,7 @@
 import foot from '@common/src/components/common/foot.vue';
 import top from './detail/top.vue';
 import videoData from './detail/videoData.vue';
+import videoLive from './detail/videoLive.vue';
 import imgtextData from './detail/imgtextData.vue';
 import productData from './detail/productData.vue';
 import expertData from './detail/expertData.vue';
@@ -63,7 +65,8 @@ export default {
   components: {
     foot,
     top,
-    videoData,
+    // videoData,
+    videoLive,
     imgtextData,
     productData,
     expertData,

src/views/twoweb/achieveLive/detail/videoLive.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="videoLive">
+    <el-row>
+      <el-col :span="24" class="main">
+        <video id="videoElement" controls autoplay class="h5video"></video>
+        <!-- <video id="videoElement" autoplay controls style="width:500px;height:300px"></video> -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dock } = createNamespacedHelpers('dock');
+import flvjs from 'flv.js';
+export default {
+  name: 'videoLive',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      info: {},
+    };
+  },
+  async created() {
+    await this.search();
+    this.$nextTick(() => {
+      this.searchLive();
+    });
+  },
+  mounted() {
+    // this.searchLive();
+  },
+  methods: {
+    ...dock(['fetch']),
+    async search() {
+      let res = await this.fetch(this.dock_id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `info`, res.data);
+      }
+    },
+    searchLive() {
+      let player = document.getElementById('videoElement');
+      if (flvjs.isSupported()) {
+        var flvPlayer = flvjs.createPlayer({
+          isLive: true,
+          type: 'flv',
+          url: `${process.env.VUE_APP_LIVE_URL + this.info.room_id}`,
+        });
+        flvPlayer.attachMediaElement(player);
+        flvPlayer.load(); //加载
+      }
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    dock_id() {
+      return this.$route.query.dock_id;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    info: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        if (val) {
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .h5video {
+    width: 100%;
+    height: 480px;
+    background: #000000;
+  }
+}
+</style>