瀏覽代碼

Merge branch 'video-tcplayer' into 11/24SAAS

lex 1 年之前
父節點
當前提交
73bfd3d56d

+ 1 - 0
package.json

@@ -55,6 +55,7 @@
     "qs": "^6.8.0",
     "screenfull": "^5.1.0",
     "swiper": "^6.3.5",
+    "tcplayer.js": "^4.8.0",
     "v-charts": "^1.19.0",
     "vant": "^2.12.19",
     "vue": "2.6.10",

+ 1 - 0
public/index.html

@@ -11,6 +11,7 @@
   <title>
     <%= webpackConfig.name %>
   </title>
+  <link href="./tcplayer.min.css" rel="stylesheet" />
 </head>
 
 <body id="body">

文件差異過大導致無法顯示
+ 21 - 0
public/tcplayer.min.css


+ 147 - 0
src/components/video-tcplayer/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="video-container">
+    <video
+      ref="video"
+      :id="videoID"
+      :src="src"
+      :class="className"
+      :preload="preload"
+      :poster="poster"
+      playsinline
+      webkit-playsinline
+      :style="styleValue"
+    />
+  </div>
+</template>
+<script>
+// import Plyr from "plyr";
+// import "plyr/dist/plyr.css";
+import TCPlayer from "tcplayer.js";
+// import "tcplayer.js/dist/tcplayer.css";
+export default {
+  name: "video-player",
+  props: {
+    setting: {
+      type: Object,
+      default: () => {}
+    },
+    className: String,
+    styleValue: String,
+    src: String,
+    poster: String,
+    controls: Boolean,
+    height: String,
+    fullscreen: Boolean,
+    preload: {
+      type: String,
+      default: "auto"
+    },
+    currentTime: {
+      type: Boolean,
+      default: true
+    },
+    playLarge: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      videoID: "video" + Date.now() + Math.floor(Math.random() * 100),
+      player: null,
+      playerPause: true // 是否暂停
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  updated() {
+    this.init();
+  },
+  methods: {
+    init() {
+      const Button = TCPlayer.getComponent("Button");
+      const BigPlayButton = TCPlayer.getComponent("BigPlayButton");
+      BigPlayButton.prototype.createEl = function() {
+        var el = Button.prototype.createEl.call(this);
+        let _html =
+          '<button><svg t="1644397862160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3095" width="64" height="64"><path d="M298.666667 247.04V682.666667a42.666667 42.666667 0 0 1-85.333334 0V170.666667a42.666667 42.666667 0 0 1 65.024-36.352l554.666667 341.333333a42.666667 42.666667 0 0 1 0 72.704l-554.666667 341.333333a42.666667 42.666667 0 0 1-44.714666-72.704L729.258667 512 298.666667 247.04z" p-id="3096" fill="#ffffff"></path></svg></button>';
+
+        el.appendChild(
+          TCPlayer.dom.createEl("div", {
+            className: "vjs-button-icon",
+            innerHTML: _html
+          })
+        );
+        return el;
+      };
+      this.player = TCPlayer(this.videoID, {
+        appID: "",
+        controls: true
+      }); // player-container-id 为播放器容器 ID,必须与 html 中一致
+      if (this.player) {
+        this.player.src(this.src); // url 播放地址
+        this.player.poster(this.poster || "");
+        // this.player.elements.container ? (this.player.elements.container.style.height = this.height || "2rem") : null;
+
+        this.player.on("play", () => {
+          this.$emit("play");
+
+          document.querySelector(".vjs-play-control").onclick = () => {
+            if (this.playerPause) {
+              this.player.play();
+            } else {
+              this.player.pause();
+            }
+          };
+        });
+
+        // 初步加载时
+        // this.player.one('loadedmetadata', () => {
+        //   console.log(' Loading metadata');
+        // });
+
+        // 视频播放时加载
+        // this.player.on('timeupdate', () => {
+        // });
+
+        this.player.on("playing", () => {
+          this.playerPause = false;
+        });
+
+        this.player.on("pause", () => {
+          this.playerPause = true;
+        });
+
+        // 视频播放结束
+        this.player.on("ended", () => {
+          this.playerPause = false;
+          this.$emit("ended");
+        });
+      }
+    },
+    onpause() {
+      this.player.pause();
+    }
+  },
+  beforeDestroy() {
+    if (this.player) {
+      this.player.src("");
+      this.player.pause();
+      this.player.dispose();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.video-container {
+  width: 100%;
+  --plyr-color-main: #01c1b5;
+}
+.video-js {
+  width: 100%;
+  min-height: 200px;
+  overflow: hidden;
+  height: fit-content;
+}
+</style>

+ 39 - 19
src/views/liveClassManager/liveClassDetail.vue

@@ -57,7 +57,7 @@
             v-model.trim="searchForm.search"
             clearable
             @keyup.enter.native="
-              (e) => {
+              e => {
                 e.target.blur();
                 $refs.searchForm.save();
                 search();
@@ -95,15 +95,27 @@
             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="乐团">
             <template slot-scope="scope">
               <tooltip :content="scope.row.musicGroupName" />
             </template>
           </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"
@@ -164,7 +176,7 @@
     >
       <!-- activeUrl -->
       <div class="activeVideoWrap">
-        <vue-core-video-player
+        <!-- <vue-core-video-player
           v-if="activeVideo.os == 'mobile' && activeVideo.videoType != 'm3u8'"
           style="width: 480px"
           :src="activeVideo.url"
@@ -197,25 +209,30 @@
           ref="dialogVideo"
         >
           您的浏览器不支持视频播放
-        </vue-core-video-player>
+        </vue-core-video-player> -->
+        <videoTcplayer class="ql-video" :src="activeVideo.url" />
       </div>
     </el-dialog>
   </div>
 </template>
 <script>
+import videoTcplayer from "@/components/video-tcplayer";
 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 },
+  components: { pagination, videoTcplayer },
   data() {
     return {
       searchForm: {
-        search: "",
+        search: ""
       },
       tableList: [],
       detail: {
@@ -226,27 +243,27 @@ export default {
         speakerName: "",
         totalLikeNum: 0,
         totalLiveTime: 0,
-        totalLookNum: 0,
+        totalLookNum: 0
       },
       rules: {
         // 分页规则
         limit: 10, // 限制显示条数
         page: 1, // 当前页
         total: 0, // 总条数
-        page_size: [10, 20, 40, 50], // 选择限制显示条数
+        page_size: [10, 20, 40, 50] // 选择限制显示条数
       },
       videoList: [],
       payVisible: false,
       videoVisible: false,
       activeVideo: { endTime: "" },
       HLSCore,
-      videoPlace,
+      videoPlace
     };
   },
   mounted() {
     this.getDetail();
     this.getList();
-    console.log(HLSCore, "HLSCore");
+    // console.log(HLSCore, "HLSCore");
   },
   methods: {
     onCancel() {
@@ -267,7 +284,7 @@ export default {
           rows: this.rules.limit,
           page: this.rules.page,
           roomUid: this.$route.query.roomUid,
-          search: this.searchForm.search,
+          search: this.searchForm.search
         };
         const res = await getLiveBroadcastRoomDetailList(obj);
         this.tableList = res.data.rows;
@@ -279,7 +296,7 @@ export default {
     async getDetail() {
       try {
         let obj = {
-          roomUid: this.$route.query.roomUid,
+          roomUid: this.$route.query.roomUid
         };
 
         const res = await getLiveBroadcastRoomDetail(obj);
@@ -299,7 +316,7 @@ export default {
         rows: this.rules.limit,
         page: this.rules.page,
         roomUid: this.$route.query.roomUid,
-        search: this.searchForm.search,
+        search: this.searchForm.search
       };
       Export(
         this,
@@ -307,12 +324,12 @@ export default {
           url: "/api-web/export/liveBroadcastRoomMember",
           fileName: `"${this.detail.roomTitle}"参与学员.xls`,
           method: "post",
-          params: qs.stringify(cleanDeep(obj)),
+          params: qs.stringify(cleanDeep(obj))
         },
         `您确定导出"${this.detail.roomTitle}"参与学员?`
       );
-    },
-  },
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -421,4 +438,7 @@ export default {
   flex-direction: column;
   align-items: center;
 }
+/deep/.video-js {
+  height: 400px;
+}
 </style>

+ 28 - 18
src/views/resetTeaming/modals/member.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="courseModel"
-    style="margin-top: 12px;"
     v-if="toolsPackage.length > 0"
     key="toolsPackage"
+    class="courseModel"
+    style="margin-top: 12px;"
   >
     <template>
       <div class="yunTrain">
@@ -12,8 +12,8 @@
           <p class="toolTitle">
             团练宝
             <span @click="videoStatus = true"
-              >查看视频<i class="icon_video"></i
-            ></span>
+              >查看视频<i class="icon_video"
+            /></span>
           </p>
           <p class="toolDate">
             购买后由机构根据教学情况,激活使用详细问题请咨询机构老师
@@ -22,7 +22,7 @@
       </div>
     </template>
 
-    <slot></slot>
+    <slot />
     <!-- <div class="section" v-if="toolsPackage.length > 0" key="toolsPackage">
       <el-row class="title-row">
         <el-col :span="isShowSalePrice ? 9 : 14"
@@ -88,11 +88,19 @@
       class="videoDialog"
       width="30%"
     >
-      <video
+      <!-- <video
         style="width: 100%"
         v-if="videoStatus"
         controls="controls"
         class="ql-video"
+        :src="'https://daya.ks3-cn-beijing.ksyun.com/202105/SWmqmvW.mp4'"
+        :poster="require('../../../assets/images/musicGroup/video_bg.png')"
+      /> -->
+      <videoTcplayer
+        v-if="videoStatus"
+        style="width: 100%"
+        controls="controls"
+        class="ql-video"
         :src="'https://oss.dayaedu.com/daya/202105/SWmqmvW.mp4'"
         :poster="require('../../../assets/images/musicGroup/video_bg.png')"
       />
@@ -101,8 +109,21 @@
 </template>
 
 <script>
+import videoTcplayer from "@/components/video-tcplayer";
 export default {
-  name: "memberModal",
+  name: "MemberModal",
+  components: { videoTcplayer },
+  filters: {
+    unitFormat(val) {
+      let template = {
+        YEAR: "年",
+        MONTH: "月",
+        QUARTERLY: "季度",
+        YEAR_HALF: "半年"
+      };
+      return template[val];
+    }
+  },
   props: {
     courseViewType: [Number, String],
     toolsPackage: Array,
@@ -134,17 +155,6 @@ export default {
     onQuestions(item) {
       this.$emit("onQuestions", item);
     }
-  },
-  filters: {
-    unitFormat(val) {
-      let template = {
-        YEAR: "年",
-        MONTH: "月",
-        QUARTERLY: "季度",
-        YEAR_HALF: "半年"
-      };
-      return template[val];
-    }
   }
 };
 </script>

部分文件因文件數量過多而無法顯示