fix 视频播放

ruoyi-ui/package.json

@@ -55,6 +55,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-aliplayer-v2": "^1.3.0",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "^2.4.0",

ruoyi-ui/src/components/map/index.vue

@@ -348,6 +348,22 @@
       </div>
     </div>
 
+    <div class="shipDiv" style="top:100rem;left:174rem" v-show="showvideos" >
+      <div class="shipTitle">
+        <span style="float:left">{{ pointDevice.name }}</span>
+        <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="showvideos=false"></i>
+      </div>
+      <div style="padding—left:10rem" class="shipContent">
+        <vue-aliplayer-v2
+        :source="source"
+        ref="VueAliplayerV2"
+        :options="options"
+      />
+      </div>
+
+
+    </div>
+
   </div>
 </template>
 
@@ -357,6 +373,7 @@ import Map from "ol/Map";
 import TileLayer from "ol/layer/Tile";
 import ImageLayer from "ol/layer/Image";
 import View from "ol/View";
+import VueAliplayerV2 from "vue-aliplayer-v2";
 
 import {getTopLeft, getWidth} from "ol/extent";
 
@@ -390,6 +407,7 @@ export default {
       shipName: '',
       deviceShow: false,
       deviceData: '',
+      showvideos:false,
       checkList: [],
       drawLayer: null,
       draw: null,
@@ -399,6 +417,15 @@ export default {
       tabledatas: [],
       deviceTableShow: false,
       posints: {},
+
+      options: {
+          preload:true,
+          autoplay:true,
+          rePlay:true,
+          isLive: true, //切换为直播流的时候必填
+          format: 'm3u8'  //切换为直播流的时候必填
+        },
+        source: "http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8",
       pointDevice: {
         name: '',
         list: [],
@@ -414,6 +441,9 @@ export default {
     };
   },
   props: ['deviceList'],
+  components: {
+     VueAliplayerV2
+  },
   mounted() {
     that = this;
     if (ispro) {
@@ -450,6 +480,14 @@ export default {
               that.deviceTableShow = false
               that.deviceData = tadata.data;
               that.d_activeName = 'd_first';
+              if(tadata.data.source=="heiyan_ship_recognition"){
+                // that.source = tadata.data.liveStreamUrl;
+                 setTimeout(function(){
+                     that.$refs.VueAliplayerV2.play();
+                 },1000)
+                 that.showvideos = true;
+
+              }
 
             }
             //  alert("我是点："+tadata.data)
@@ -461,6 +499,14 @@ export default {
 
     //  this.addpoint();
     //  this.addline();
+
+    // setTimeout(function(){
+    //   // alert(11);
+    //   that.$refs.VueAliplayerV2.play();
+
+    // },4000)
+
+
   },
   methods: {
     //[[1111,1111]]

ruoyi-ui/vue.config.js

@@ -37,29 +37,34 @@ module.exports = {
                 target: `http://cbwq.xt.wenhq.top:8083/prod-api`,
                 changeOrigin: true,
                 pathRewrite: {
-                    ["^" + process.env.VUE_APP_BASE_API]: ""
-                }
-            }
+                    ["^" + process.env.VUE_APP_BASE_API]: "",
+                },
+            },
+            "/PLTV": {
+                target: "http://localhost:8082",
+                ws: true,
+                changeOrigin: true,
+                pathRewrite: {
+                    "^/": "",
+                },
+            },
         },
-        disableHostCheck: true
+        disableHostCheck: true,
     },
     configureWebpack: {
         name: name,
         resolve: {
             alias: {
-                "@": resolve("src")
-            }
-        }
+                "@": resolve("src"),
+            },
+        },
     },
     chainWebpack(config) {
         config.plugins.delete("preload"); // TODO: need test
         config.plugins.delete("prefetch"); // TODO: need test
 
         // set svg-sprite-loader
-        config.module
-            .rule("svg")
-            .exclude.add(resolve("src/assets/icons"))
-            .end();
+        config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
         config.module
             .rule("icons")
             .test(/\.svg$/)
@@ -68,18 +73,18 @@ module.exports = {
             .use("svg-sprite-loader")
             .loader("svg-sprite-loader")
             .options({
-                symbolId: "icon-[name]"
+                symbolId: "icon-[name]",
             })
             .end();
 
-        config.when(process.env.NODE_ENV !== "development", config => {
+        config.when(process.env.NODE_ENV !== "development", (config) => {
             config
                 .plugin("ScriptExtHtmlWebpackPlugin")
                 .after("html")
                 .use("script-ext-html-webpack-plugin", [{
                     // `runtime` must same as runtimeChunk name. default is `runtime`
-                    inline: /runtime\..*\.js$/
-                }])
+                    inline: /runtime\..*\.js$/,
+                }, ])
                 .end();
             config.optimization.splitChunks({
                 chunks: "all",
@@ -88,26 +93,26 @@ module.exports = {
                         name: "chunk-libs",
                         test: /[\\/]node_modules[\\/]/,
                         priority: 10,
-                        chunks: "initial" // only package third parties that are initially dependent
+                        chunks: "initial", // only package third parties that are initially dependent
                     },
                     elementUI: {
                         name: "chunk-elementUI", // split elementUI into a single package
                         priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
                     },
                     commons: {
                         name: "chunk-commons",
                         test: resolve("src/components"), // can customize your rules
                         minChunks: 3, //  minimum common number
                         priority: 5,
-                        reuseExistingChunk: true
-                    }
-                }
+                        reuseExistingChunk: true,
+                    },
+                },
             });
             config.optimization.runtimeChunk("single"), {
                 from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
-                to: "./" //到根目录下
+                to: "./", //到根目录下
             };
         });
-    }
+    },
 };