播放hls

1

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@core-player/playcore-hls": "^0.1.1",
     "@rongcloud/engine": "^5.4.3",
     "@rongcloud/imkit": "^5.3.0",
     "@rongcloud/imlib-next": "^5.4.3",
@@ -57,6 +58,7 @@
     "vue": "2.6.10",
     "vue-amap": "^0.5.10",
     "vue-awesome-swiper": "^4.1.1",
+    "vue-core-video-player": "^0.2.0",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "^0.4.9",
     "vue-drag-resize": "^1.5.4",

src/main.js

@@ -12,6 +12,7 @@ import PortalVue from "portal-vue";
 Vue.use(PortalVue);
 import { permission } from "@/utils/directivePage";
 import { getTenantId } from "@/utils/auth";
+
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 dayjs.extend(isBetween);
@@ -41,6 +42,10 @@ import "./utils/directive";
 import "@/icons"; // icon
 import "@/permission"; // permission control
 import { Message } from "element-ui";
+import VueCoreVideoPlayer from 'vue-core-video-player'
+Vue.use(VueCoreVideoPlayer,{
+  lang: 'zh-CN'
+})
 const showMessage = Symbol("showMessage");
 
 // imkit 为核心模块
@@ -129,7 +134,6 @@ document.addEventListener("mousewheel", function() {
 // if (process.env.NODE_ENV === 'production') {
 //   mockXHR()
 // }
-
 // 高德地址
 import VueAMap from "vue-amap";
 Vue.use(VueAMap);

src/views/liveClassManager/liveClassDetail.vue

@@ -72,9 +72,7 @@
           <el-button
             type="primary"
             v-if="tableList.length > 0"
-            v-permission="
-              'export/liveBroadcastRoomMember'
-            "
+            v-permission="'export/liveBroadcastRoomMember'"
             @click="exportStudent"
             >导出</el-button
           >
@@ -97,26 +95,14 @@
             prop="studentName"
             label="学员姓名"
           ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="organName"
-            label="分部"
-          ></el-table-column>
+          <el-table-column align="center" prop="organName" label="分部"></el-table-column>
           <el-table-column
             align="center"
             prop="musicGroupName"
             label="乐团"
           ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="phone"
-            label="手机号"
-          ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="subName"
-            label="声部"
-          ></el-table-column>
+          <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
+          <el-table-column align="center" prop="subName" label="声部"></el-table-column>
           <el-table-column
             align="center"
             prop="joinTime"
@@ -152,7 +138,8 @@
           @click="opneVideo(item)"
         >
           <div class="linkItemWrap">
-            <video width="110px" :src="item.url"></video>
+            <!-- <video width="110px" :src="item.url"></video> -->
+            <img width="110px" :src="videoPlace" alt="" />
             <i class="el-icon-video-play linkIcon"></i>
           </div>
 
@@ -176,24 +163,26 @@
     >
       <!-- activeUrl -->
       <div class="activeVideoWrap">
-        <video
+        <vue-core-video-player
           v-if="activeVideo.os == 'mobile'"
           style="width: 320px"
           :src="activeVideo.url"
           ref="dialogVideo"
           controls="controls"
+          :core="HLSCore"
         >
           您的浏览器不支持视频播放
-        </video>
-        <video
+        </vue-core-video-player>
+        <vue-core-video-player
           v-else
           style="width: 640px"
           :src="activeVideo.url"
           ref="dialogVideo"
           controls="controls"
+          :core="HLSCore"
         >
           您的浏览器不支持视频播放
-        </video>
+        </vue-core-video-player>
       </div>
     </el-dialog>
   </div>
@@ -202,11 +191,10 @@
 import pagination from "@/components/Pagination/index";
 import cleanDeep from "clean-deep";
 import qs from "qs";
-import {
-  getLiveBroadcastRoomDetail,
-  getLiveBroadcastRoomDetailList,
-} from "./api";
+import { getLiveBroadcastRoomDetail, getLiveBroadcastRoomDetailList } from "./api";
 import { Export } from "@/utils/downLoadFile";
+import videoPlace from "./images/video-place.png";
+import HLSCore from "@core-player/playcore-hls";
 export default {
   components: { pagination },
   data() {
@@ -236,6 +224,8 @@ export default {
       payVisible: false,
       videoVisible: false,
       activeVideo: { endTime: "" },
+      HLSCore,
+      videoPlace,
     };
   },
   mounted() {
@@ -289,11 +279,11 @@ export default {
     },
     exportStudent() {
       let obj = {
-          rows: this.rules.limit,
-          page: this.rules.page,
-          roomUid: this.$route.query.roomUid,
-          search: this.searchForm.search,
-        };
+        rows: this.rules.limit,
+        page: this.rules.page,
+        roomUid: this.$route.query.roomUid,
+        search: this.searchForm.search,
+      };
       Export(
         this,
         {