视频课件

src/components/ali-player/index.vue

@@ -67,9 +67,21 @@ const fnCreateAliPlayer = async () => {
   player = new window.Aliplayer(
     {
       id: "J_prismPlayer",
-      source: props.source,
-      vid: props.vid,
-      playauth: props.playAuth,
+      ...(props.source
+        ? { source: props.source }
+        : {
+            vid: props.vid,
+            playauth: props.playAuth,
+            qualitySort: "asc",
+            format: "m3u8",
+            encryptType: 1,
+            mediaType: "video",
+            autoplay: true,
+            isLive: false,
+            rePlay: false,
+            playsinline: true,
+            controlBarVisibility: "hover",
+          }),
       cover: props.cover,
       width: props.width,
       height: props.height,

src/components/video/index.vue

@@ -41,6 +41,7 @@ const emits = defineEmits(["update:visible"]);
 const visible = useVModel(props, "visible", emits);
 const playerRef = ref(null);
 const fnSrc = (src) => {
+  if (!src) return;
   if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
   else return VITE_FILE_URL + src;
 };

src/request/api.js

@@ -17,3 +17,9 @@ export const getInfo = (params) =>
 export const setUploadImg = (params) => upload("/imgfiles/add", params); // 上传附件
 export const setDeleteImg = (params) => post("/imgfiles/delete", params); // 删除附件
 export const getViewImg = (params) => post("/imgfiles/listImgs", params); // 查看图片
+
+export const getVideoSource = (params) =>
+  post("/videoRes/getVideoPlayAuth", params); // 获取视频 目前404
+
+export const getVideoAuth = (params) =>
+  post("/videocourseware/getVideoPlayAuth", params); // 获取视频权限

src/views/platform_resource_library/courseware/video.vue

@@ -104,7 +104,17 @@
         <el-table-column prop="NUMEXAMPLE" label="习题数" />
         <el-table-column label="操作" width="200">
           <template v-slot="{ row }">
-            <el-button type="primary" text link @click="fnOpenVideo(row)">
+            <el-button
+              type="primary"
+              text
+              link
+              v-if="
+                (row.VIDEOCOURSEWARE_ID_REMOTE &&
+                  row.VIDEOCOURSEWARE_ID_REMOTE.length > 0) ||
+                (row.VIDEOFILES && row.VIDEOFILES.length > 0)
+              "
+              @click="fnPreviewVideo(row)"
+            >
               预览
             </el-button>
             <el-button
@@ -136,6 +146,12 @@
         </el-table-column>
       </layout-table>
     </layout-card>
+    <layout-video
+      :src="data.videoDialog.src"
+      :vid="data.videoDialog.vid"
+      :play-auth="data.videoDialog.playAuth"
+      v-model:visible="data.videoDialog.visible"
+    />
   </div>
 </template>
 
@@ -153,6 +169,8 @@ import LayoutTable from "@/components/table/index.vue";
 import { debounce } from "throttle-debounce";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRouter } from "vue-router";
+import LayoutVideo from "@/components/video/index.vue";
+import { getVideoAuth, getVideoSource } from "@/request/api.js";
 
 const router = useRouter();
 const { list, pagination, searchForm, fnGetData, fnResetPagination } =
@@ -163,8 +181,12 @@ const data = reactive({
     { value: "0", label: "启用" },
     { value: "1", label: "禁用" },
   ],
-  videoVisible: false,
-  videoSource: "",
+  videoDialog: {
+    src: "",
+    vid: "",
+    playAuth: "",
+    visible: false,
+  },
 });
 
 const fnAdd = debounce(1000, async (VIDEOCOURSEWARE_ID) => {
@@ -174,9 +196,30 @@ const fnAdd = debounce(1000, async (VIDEOCOURSEWARE_ID) => {
   fnResetPagination();
 });
 
-const fnOpenVideo = async () => {
-  // todo
-  ElMessage.info("功能开发中");
+const fnPreviewVideo = async (row) => {
+  if (
+    row.VIDEOCOURSEWARE_ID_REMOTE &&
+    row.VIDEOCOURSEWARE_ID_REMOTE.length > 0
+  ) {
+    const respData = await getVideoSource({
+      VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID_REMOTE,
+      CURRICULUM_ID: row.CURRICULUM_ID_REMOTE,
+    });
+    if (respData && respData.result === "success") {
+      data.videoDialog.playAuth = respData.playAuth;
+      data.videoDialog.vid = row.VIDEOFILES;
+      data.videoDialog.visible = true;
+    }
+  } else if (row.VIDEOFILES && row.VIDEOFILES.length > 0) {
+    const respData = await getVideoAuth({
+      videoId: row.VIDEOFILES,
+    });
+    if (respData && respData.result === "success") {
+      data.videoDialog.playAuth = respData.playAuth;
+      data.videoDialog.vid = row.VIDEOFILES;
+      data.videoDialog.visible = true;
+    }
+  }
 };
 </script>