Browse Source

修改视屏地址

lex 2 years ago
parent
commit
f11d10cdc5

+ 2 - 1
package.json

@@ -21,7 +21,6 @@
     "@rongcloud/imlib-next": "^5.4.3",
     "@shopify/draggable": "^1.0.0-beta.8",
     "@vant/touch-emulator": "^1.4.0",
-    "JSONPath": "^0.11.2",
     "axios": "0.18.1",
     "browserslist": "^4.18.1",
     "caniuse-lite": "^1.0.30001286",
@@ -36,6 +35,7 @@
     "i": "^0.3.6",
     "js-base64": "^3.6.0",
     "js-cookie": "2.2.0",
+    "JSONPath": "^0.11.2",
     "linq": "^3.2.2",
     "lodash": "^4.17.20",
     "mammoth": "^1.4.19",
@@ -53,6 +53,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">

File diff suppressed because it is too large
+ 21 - 0
public/tcplayer.min.css


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

@@ -0,0 +1,129 @@
+<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
+    };
+  },
+  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");
+        });
+
+        // 初步加载时
+        // this.player.one('loadedmetadata', () => {
+        //   console.log(' Loading metadata');
+        // });
+
+        // 视频播放时加载
+        // this.player.on('timeupdate', () => {
+        // });
+
+        // 视频播放结束
+        this.player.on("ended", () => {
+          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>

+ 11 - 1
src/views/resetTeaming/modals/member.vue

@@ -81,7 +81,15 @@
       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
         style="width: 100%"
         v-if="videoStatus"
         controls="controls"
@@ -94,8 +102,10 @@
 </template>
 
 <script>
+import videoTcplayer from "@/components/video-tcplayer";
 export default {
   name: "courseModel",
+  components: { videoTcplayer },
   props: {
     courseViewType: [Number, String],
     toolsPackage: Array,

Some files were not shown because too many files changed in this diff