fix bug:m3u8视频无法播放问题

package.json

@@ -43,7 +43,6 @@
     "jsdoc": "^3.6.10",
     "jsdoc-vuejs": "^4.0.0",
     "less": "^4.1.2",
-    "mockjs": "^1.1.0",
     "node-sass": "^7.0.1",
     "sass": "^1.25.0",
     "sass-loader": "^8.0.2",

src/common/dplayer.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="dplayer"></div>
+</template>
+
+<script>
+import Hls from "hls.js";
+import DPlayer from "dplayer";
+export default {
+  mounted() {
+    // document.getElementById("dplayer").oncontextmenu = () => {
+    //   document.querySelector(".dplayer-menu").style.display = "none";
+    //   document.querySelector(".dplayer-mask").style.display = "none";
+    //   return false;
+    // };
+    const dp = new DPlayer({
+      container: document.getElementById("dplayer"),
+      live: true,
+      video: {
+        url: "https://cctvwbndbd.a.bdydns.com/cctvwbnd/cctv1_2/index.m3u8?BR=single",
+        type: "customHls",
+        customType: {
+          customHls: function (video, player) {
+            const hls = new Hls();
+            hls.loadSource(video.src);
+            hls.attachMedia(video);
+          },
+        },
+      },
+    });
+  },
+};
+</script>

src/main.js

@@ -26,7 +26,7 @@ import {postRequest} from "./utils/api";
 import {putRequest} from "./utils/api";
 import {deleteRequest} from "./utils/api";
 import {getRequest} from "./utils/api";
-import {mockRequest} from "./utils/api";
+// import {mockRequest} from "./utils/api";
 
 import {postKeyValueRequest} from "./utils/api";
 import VueDragResize from "vue-drag-resize"
@@ -49,7 +49,7 @@ Vue.prototype.putRequest = putRequest;
 Vue.prototype.deleteRequest = deleteRequest;
 Vue.prototype.getRequest = getRequest;
 
-Vue.prototype.mockRequest = mockRequest;
+// Vue.prototype.mockRequest = mockRequest;
 Vue.prototype.$echarts = window.echarts
 Vue.config.productionTip = false
 // Vue.prototype.$http = httpRequest // ajax请求方法

src/mock/index.js

@@ -1,125 +1,125 @@
-import Mock from "mockjs";
-import dayjs from "dayjs";
-dayjs().format();
-// 设置延时200-600毫秒请求到数据
-Mock.setup({
-  timeout: "200-600",
-});
-var count1 = 0;
-var data1 = {
-  xData: [],
-  yData: [],
-};
-var data2 = {
-  xData: [],
-  yData: [],
-};
-var data3 = {
-  xData: [],
-  yData: [],
-};
-var data4 = {
-  xData: [],
-  yData: [],
-};
-//实时 展示近30s数据，每隔1s调用一次
-let secondInfo = {
-  code: 0,
-  data: function() {
-    if (count1 < 31) {
-      for (let num = 30; num >= 0; num--) {
-        data1.xData.push(
-          dayjs()
-            .subtract(num, "second")
-            .format("HH:mm:ss")
-        );
-        data1.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
-        count1++;
-      }
-    } else {
-      data1.xData.shift();
-      data1.yData.shift();
-      data1.xData.push(dayjs().format("HH:mm:ss"));
-      data1.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
-    }
-    data1.xData = data1.xData.slice(0, 31);
-    data1.yData = data1.yData.slice(0, 31);
-    return data1;
-  },
-};
-Mock.mock(RegExp("/mock/monitor/second.*"), "get", (options) => {
-  return Mock.mock(secondInfo);
-});
-Mock.mock("/clearData", "get", () => {
-  count1 = 0;
-  data1 = {
-    xData: [],
-    yData: [],
-  };
-  data2 = {
-    xData: [],
-    yData: [],
-  };
-  data3 = {
-    xData: [],
-    yData: [],
-  };
-  data4 = {
-    xData: [],
-    yData: [],
-  };
-  return;
-});
+// import Mock from "mockjs";
+// import dayjs from "dayjs";
+// dayjs().format();
+// // 设置延时200-600毫秒请求到数据
+// Mock.setup({
+//   timeout: "200-600",
+// });
+// var count1 = 0;
+// var data1 = {
+//   xData: [],
+//   yData: [],
+// };
+// var data2 = {
+//   xData: [],
+//   yData: [],
+// };
+// var data3 = {
+//   xData: [],
+//   yData: [],
+// };
+// var data4 = {
+//   xData: [],
+//   yData: [],
+// };
+// //实时 展示近30s数据，每隔1s调用一次
+// let secondInfo = {
+//   code: 0,
+//   data: function() {
+//     if (count1 < 31) {
+//       for (let num = 30; num >= 0; num--) {
+//         data1.xData.push(
+//           dayjs()
+//             .subtract(num, "second")
+//             .format("HH:mm:ss")
+//         );
+//         data1.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
+//         count1++;
+//       }
+//     } else {
+//       data1.xData.shift();
+//       data1.yData.shift();
+//       data1.xData.push(dayjs().format("HH:mm:ss"));
+//       data1.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
+//     }
+//     data1.xData = data1.xData.slice(0, 31);
+//     data1.yData = data1.yData.slice(0, 31);
+//     return data1;
+//   },
+// };
+// Mock.mock(RegExp("/mock/monitor/second.*"), "get", (options) => {
+//   return Mock.mock(secondInfo);
+// });
+// Mock.mock("/clearData", "get", () => {
+//   count1 = 0;
+//   data1 = {
+//     xData: [],
+//     yData: [],
+//   };
+//   data2 = {
+//     xData: [],
+//     yData: [],
+//   };
+//   data3 = {
+//     xData: [],
+//     yData: [],
+//   };
+//   data4 = {
+//     xData: [],
+//     yData: [],
+//   };
+//   return;
+// });
 
-//近一天 以1小时为单位 展示24个数据 每隔一小时调用一次
-Mock.mock("/mock/monitor/oneday", {
-  code: 0,
-  data: function() {
-    for (let num = 24; num >= 0; num--) {
-      data2.xData.push(
-        dayjs()
-          .subtract(num, "hour")
-          .format("MM-DD HH 时")
-      );
-      data2.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
-    }
-    data2.xData = data2.xData.slice(0, 25);
-    data2.yData = data2.yData.slice(0, 25);
-    return data2;
-  },
-});
-//近10天 以8小时为单位 展示30个数据 每隔8小时调用一次
-Mock.mock("/mock/monitor/tenday", {
-  code: 0,
-  data: function() {
-    for (let num = 30; num >= 0; num--) {
-      data3.xData.push(
-        dayjs()
-          .subtract(num * 8, "hour")
-          .format("MM-DD HH 时")
-      );
-      data3.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
-    }
-    data3.xData = data3.xData.slice(0, 31);
-    data3.yData = data3.yData.slice(0, 31);
-    return data3;
-  },
-});
+// //近一天 以1小时为单位 展示24个数据 每隔一小时调用一次
+// Mock.mock("/mock/monitor/oneday", {
+//   code: 0,
+//   data: function() {
+//     for (let num = 24; num >= 0; num--) {
+//       data2.xData.push(
+//         dayjs()
+//           .subtract(num, "hour")
+//           .format("MM-DD HH 时")
+//       );
+//       data2.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
+//     }
+//     data2.xData = data2.xData.slice(0, 25);
+//     data2.yData = data2.yData.slice(0, 25);
+//     return data2;
+//   },
+// });
+// //近10天 以8小时为单位 展示30个数据 每隔8小时调用一次
+// Mock.mock("/mock/monitor/tenday", {
+//   code: 0,
+//   data: function() {
+//     for (let num = 30; num >= 0; num--) {
+//       data3.xData.push(
+//         dayjs()
+//           .subtract(num * 8, "hour")
+//           .format("MM-DD HH 时")
+//       );
+//       data3.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
+//     }
+//     data3.xData = data3.xData.slice(0, 31);
+//     data3.yData = data3.yData.slice(0, 31);
+//     return data3;
+//   },
+// });
 
-// 过去一个月的数据 以天为单位 隔一天调用一次
-Mock.mock("/mock/monitor/month", {
-  code: 0,
-  data: function() {
-    for (let num = 30; num >= 0; num--) {
-      data4.xData.push(
-        dayjs()
-          .subtract(num, "day")
-          .format("MM-DD")
-      );
-      data4.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
-    }
-    data4.xData = data4.xData.slice(0, 31);
-    data4.yData = data4.yData.slice(0, 31);
-    return data4;
-  },
-});
+// // 过去一个月的数据 以天为单位 隔一天调用一次
+// Mock.mock("/mock/monitor/month", {
+//   code: 0,
+//   data: function() {
+//     for (let num = 30; num >= 0; num--) {
+//       data4.xData.push(
+//         dayjs()
+//           .subtract(num, "day")
+//           .format("MM-DD")
+//       );
+//       data4.yData.push((Math.random() * (40 - 20) + 20).toFixed(1));
+//     }
+//     data4.xData = data4.xData.slice(0, 31);
+//     data4.yData = data4.yData.slice(0, 31);
+//     return data4;
+//   },
+// });