|
|
@@ -16,8 +16,8 @@
|
|
|
>
|
|
|
<el-button slot="trigger" size="small" type="primary" >选取视频</el-button>
|
|
|
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">点击上传</el-button>
|
|
|
-<!-- <el-progress style="margin-top: 10px;" :key="'线路一'" class="progress" :text-inside="true" :stroke-width="18" :percentage="txProgress" status="success"></el-progress>-->
|
|
|
-<!-- <el-progress style="margin-top: 10px;" :key="'线路二'" class="progress" :text-inside="true" :stroke-width="18" :percentage="hwProgress" status="success"></el-progress>-->
|
|
|
+ <!-- 仅当showControl为true时显示视频库选取按钮 -->
|
|
|
+ <el-button v-if="showControl" style="margin-left: 10px;" size="small" type="success" @click="openVideoLibrary">视频库选取</el-button>
|
|
|
<!-- 线路一 -->
|
|
|
<div class="progress-container">
|
|
|
<span class="progress-label">线路一</span>
|
|
|
@@ -53,12 +53,71 @@
|
|
|
<div v-if="fileKey">文件Key: {{ fileKey }}</div>
|
|
|
<div v-if="fileSize">文件大小(MB): {{ (fileSize / (1024 * 1024)).toFixed(2) }} MB</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="播放线路" >
|
|
|
+ <!-- 仅当showControl为true时显示播放线路选择器 -->
|
|
|
+ <el-form-item v-if="showControl" label="播放线路">
|
|
|
<el-radio-group v-model="localUploadType">
|
|
|
<el-radio :label="1" >线路一</el-radio>
|
|
|
<el-radio :label="2" >线路二</el-radio>
|
|
|
+ <!-- <el-radio :label="3" >线路三</el-radio>-->
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <!-- 视频库选择对话框 -->
|
|
|
+ <el-dialog title="视频库选择" :visible.sync="libraryOpen" width="900px" append-to-body>
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <el-form :inline="true" :model="libraryQueryParams" class="library-search">
|
|
|
+ <el-form-item label="素材名称">
|
|
|
+ <el-input
|
|
|
+ v-model="libraryQueryParams.resourceName"
|
|
|
+ placeholder="请输入素材名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleLibraryQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleLibraryQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetLibraryQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 视频列表 -->
|
|
|
+ <el-table v-loading="libraryLoading" :data="libraryList" @row-click="handleLibrarySelect" highlight-current-row>
|
|
|
+ <el-table-column label="素材名称" align="center" prop="resourceName" />
|
|
|
+ <el-table-column label="文件名称" align="center" prop="fileName" />
|
|
|
+ <el-table-column label="缩略图" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover
|
|
|
+ placement="right"
|
|
|
+ title=""
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <img alt="" slot="reference" :src="scope.row.thumbnail" style="width: 80px; height: 50px" />
|
|
|
+ <img alt="" :src="scope.row.thumbnail" style="max-width: 150px;" />
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="视频时长" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ formatDuration(scope.row.duration) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <pagination
|
|
|
+ v-show="libraryTotal>0"
|
|
|
+ :total="libraryTotal"
|
|
|
+ :page.sync="libraryQueryParams.pageNum"
|
|
|
+ :limit.sync="libraryQueryParams.pageSize"
|
|
|
+ @pagination="getLibraryList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="confirmVideoSelection">确 定</el-button>
|
|
|
+ <el-button @click="cancelVideoSelection">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -68,8 +127,13 @@ import {getThumbnail} from "@/api/course/userVideo";
|
|
|
import TcVod from "vod-js-sdk-v6";
|
|
|
import { uploadObject } from "@/utils/cos.js";
|
|
|
import { uploadToOBS } from "@/utils/obs.js";
|
|
|
+import Pagination from "@/components/Pagination";
|
|
|
+import { listVideoResource } from '@/api/course/videoResource';
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ Pagination
|
|
|
+ },
|
|
|
props: {
|
|
|
videoUrl: {
|
|
|
type: String,
|
|
|
@@ -115,6 +179,12 @@ export default {
|
|
|
type: Number,
|
|
|
default: 0,
|
|
|
},
|
|
|
+
|
|
|
+ // 使用一个变量控制显示，默认为true显示所有控制项
|
|
|
+ showControl: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -124,8 +194,8 @@ export default {
|
|
|
duration: 0,
|
|
|
fileId: "",
|
|
|
uploadTypeOptions: [
|
|
|
- { dictLabel: "线路一", dictValue: 1 }, //腾讯pcdn
|
|
|
- { dictLabel: "线路二", dictValue: 2 }, //华为云obs
|
|
|
+ { dictLabel: "线路一", dictValue: 1 }, // 腾讯pcdn
|
|
|
+ { dictLabel: "线路二", dictValue: 2 }, // 华为云obs
|
|
|
// { dictLabel: "华为云VOD", dictValue: 4 },
|
|
|
// { dictLabel: "腾讯云VOD", dictValue: 5 },
|
|
|
],
|
|
|
@@ -134,7 +204,17 @@ export default {
|
|
|
hwProgress: 0,
|
|
|
uploadLoading: false,
|
|
|
uploadKey: 0,
|
|
|
- // thumbnail: '',
|
|
|
+ // 视频库选择相关数据
|
|
|
+ libraryOpen: false,
|
|
|
+ libraryLoading: false,
|
|
|
+ libraryTotal: 0,
|
|
|
+ libraryList: [],
|
|
|
+ selectedVideo: null,
|
|
|
+ libraryQueryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ resourceName: null
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -147,10 +227,15 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 打开视频库对话框
|
|
|
+ openVideoLibrary() {
|
|
|
+ this.libraryOpen = true;
|
|
|
+ this.selectedVideo = null;
|
|
|
+ this.getLibraryList();
|
|
|
+ },
|
|
|
handleChange(file, fileList) {
|
|
|
this.fileList = fileList;
|
|
|
this.getVideoDuration(file.raw);
|
|
|
-
|
|
|
},
|
|
|
getVideoDuration(file) {
|
|
|
const video = document.createElement("video");
|
|
|
@@ -200,9 +285,9 @@ export default {
|
|
|
console.log("isPrivate=======>",this.isPrivate)
|
|
|
let line_1='' ;
|
|
|
if (this.isPrivate===0){
|
|
|
- line_1 = `${process.env.VUE_APP_VUE_APP_OSS_LINE_1}${data.urlPath}`;
|
|
|
+ line_1 = `${process.env.VUE_APP_VIDEO_LINE_1}${data.urlPath}`;
|
|
|
}else {
|
|
|
- line_1 = `${process.env.VUE_APP_VUE_APP_OSS_LINE_1}${data.urlPath}`;
|
|
|
+ line_1 = `${process.env.VUE_APP_VIDEO_LINE_1}${data.urlPath}`;
|
|
|
}
|
|
|
|
|
|
let urlPathWithoutFirstSlash = data.urlPath.substring(1);
|
|
|
@@ -226,9 +311,9 @@ export default {
|
|
|
console.log("华为OBS返回========>",data);
|
|
|
let line_2='' ;
|
|
|
if (this.isPrivate===0){
|
|
|
- line_2 = `${process.env.VUE_APP_OSS_LINE_2}/${data.urlPath}`;
|
|
|
+ line_2 = `${process.env.VUE_APP_VIDEO_LINE_2}/${data.urlPath}`;
|
|
|
}else {
|
|
|
- line_2 = `${process.env.VUE_APP_OSS_LINE_2}/${data.urlPath}`;
|
|
|
+ line_2 = `${process.env.VUE_APP_VIDEO_LINE_2}/${data.urlPath}`;
|
|
|
}
|
|
|
// this.$emit("update:videoUrl", data);
|
|
|
this.$emit("update:line_2", line_2);
|
|
|
@@ -241,12 +326,77 @@ export default {
|
|
|
console.log(file, fileList.length);
|
|
|
},
|
|
|
resetUpload() {
|
|
|
+ // 重置内部状态
|
|
|
this.txProgress = 0;
|
|
|
- this.hwProgress=0;
|
|
|
+ this.hwProgress = 0;
|
|
|
this.fileList = [];
|
|
|
this.uploadKey++;
|
|
|
},
|
|
|
- },
|
|
|
+ /** 查询视频库列表 */
|
|
|
+ getLibraryList() {
|
|
|
+ this.libraryLoading = true;
|
|
|
+ listVideoResource(this.libraryQueryParams).then(response => {
|
|
|
+ this.libraryList = response.rows;
|
|
|
+ this.libraryTotal = response.total;
|
|
|
+ this.libraryLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索视频库按钮操作 */
|
|
|
+ handleLibraryQuery() {
|
|
|
+ this.libraryQueryParams.pageNum = 1;
|
|
|
+ this.getLibraryList();
|
|
|
+ },
|
|
|
+ /** 重置视频库查询按钮操作 */
|
|
|
+ resetLibraryQuery() {
|
|
|
+ this.libraryQueryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ resourceName: null
|
|
|
+ };
|
|
|
+ this.handleLibraryQuery();
|
|
|
+ },
|
|
|
+ /** 视频库选择行点击 */
|
|
|
+ handleLibrarySelect(row) {
|
|
|
+ this.selectedVideo = row;
|
|
|
+ },
|
|
|
+ /** 格式化视频时长 */
|
|
|
+ formatDuration(seconds) {
|
|
|
+ if (!seconds) return '00:00';
|
|
|
+
|
|
|
+ const minutes = Math.floor(seconds / 60);
|
|
|
+ const remainingSeconds = seconds % 60;
|
|
|
+
|
|
|
+ return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
|
+ },
|
|
|
+ /** 确认选择视频 */
|
|
|
+ confirmVideoSelection() {
|
|
|
+ if (!this.selectedVideo) {
|
|
|
+ this.$message.warning("请选择一个视频");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新组件内部数据
|
|
|
+ this.$emit("update:fileName", this.selectedVideo.fileName);
|
|
|
+ this.$emit("update:thumbnail", this.selectedVideo.thumbnail);
|
|
|
+ this.$emit("update:line_1", this.selectedVideo.line1);
|
|
|
+ this.$emit("update:line_2", this.selectedVideo.line2);
|
|
|
+ this.$emit("update:line_3", this.selectedVideo.line3);
|
|
|
+ this.$emit("update:fileSize", this.selectedVideo.fileSize);
|
|
|
+ this.$emit("update:fileKey", this.selectedVideo.fileKey);
|
|
|
+ this.$emit("update:uploadType", this.selectedVideo.uploadType);
|
|
|
+ this.$emit("video-duration", this.selectedVideo.duration);
|
|
|
+
|
|
|
+ // 设置预览URL
|
|
|
+ this.$emit("update:videoUrl", this.selectedVideo.videoUrl);
|
|
|
+
|
|
|
+ this.libraryOpen = false;
|
|
|
+ },
|
|
|
+ /** 取消视频选择 */
|
|
|
+ cancelVideoSelection() {
|
|
|
+ this.libraryOpen = false;
|
|
|
+ this.selectedVideo = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -257,9 +407,17 @@ export default {
|
|
|
|
|
|
.progress-label {
|
|
|
display: block;
|
|
|
- //margin-bottom: 5px;
|
|
|
font-weight: bold;
|
|
|
font-size: 13px;
|
|
|
color: #303331; /* 标签颜色，可以根据需要调整 */
|
|
|
}
|
|
|
+
|
|
|
+/* 视频库选择对话框样式 */
|
|
|
+.library-search {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .el-table__row:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
