From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/views/preview/video.vue | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 161 insertions(+), 0 deletions(-)
diff --git a/src/views/preview/video.vue b/src/views/preview/video.vue
new file mode 100644
index 0000000..5b323c6
--- /dev/null
+++ b/src/views/preview/video.vue
@@ -0,0 +1,161 @@
+<template>
+ <div class="contentBox">
+ <div class="videoName">{{ $route.query.titleName }}</div>
+ <div class="videoBox">
+ <video
+ @canplay="getDuration"
+ @timeupdate="updateTime"
+ ref="audio"
+ controls
+ controlsList="nodownload"
+ oncontextmenu="return false"
+ autoplay
+ :src="videoSrc"
+ >
+ <!-- <source :src="videoSrc" type="video/mp4" ref="myPlayer" /> -->
+ </video>
+ </div>
+ <!-- <div class="calssInfo">
+ <el-tabs type="border-card">
+ <el-tab-pane label="璇剧▼绠�浠�">
+ <div class="tabItem" v-loading="descriptionLoading">
+ <div
+ class="richTextBox"
+ v-html="description.autism_introduction"
+ ></div>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="绔犺妭鐩綍">
+ <div class="tabItem" v-loading="catalogueLoading">
+ <p v-for="(item, index) in catalogue" :key="index" class="selected">
+ {{ item.name }}
+ </p>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div> -->
+ </div>
+</template>
+
+<script>
+import { getImage } from "@/assets/js/toolClass";
+
+export default {
+ props: {
+ query: {
+ type: Object
+ },
+ idPath: {
+ type: String
+ }
+ },
+ data() {
+ return {
+ videoSrc: "",
+ description: "",
+ catalogue: "",
+ descriptionLoading: true,
+ catalogueLoading: true
+ };
+ },
+ created() {
+ scrollTo(0, 0);
+ this.videoSrc =
+ this.config.requestCtx +
+ "/file/api/ApiDownload?md5=" +
+ this.$route.query.md5;
+ },
+ methods: {
+ // 鑾峰彇鐩綍
+ getCatalogue() {
+ this.catalogueLoading = true;
+ let query = {
+ path: this.idPath,
+ fields: {
+ autism_video: [],
+ autism_introduction: [],
+ autism_totalDuration: []
+ },
+ filterList: {
+ "SysType=": "Cmsitem"
+ }
+ };
+ this.MG.resource.getItem(query).then((res) => {
+ this.catalogue = res.datas;
+ // this.aliVod(this.catalogue[0].autism_video);
+ this.videoSrc =
+ this.config.requestCtx +
+ "/file/api/ApiDownload?md5=" +
+ this.multimedia.autism_video;
+ this.catalogueLoading = false;
+ });
+ },
+ getDuration() {
+ this.audio = this.$refs.audio;
+ this.duration = this.timeFormat(this.$refs.audio.duration);
+ },
+ timeFormat(number) {
+ let minute = parseInt(number / 60);
+ let second = parseInt(number % 60);
+ minute = minute >= 10 ? minute : "0" + minute;
+ second = second >= 10 ? second : "0" + second;
+ return minute + ":" + second;
+ },
+ updateTime() {
+ if (!this.$refs.progress) return;
+ this.currentDuration = this.timeFormat(this.audio.currentTime);
+ //濡傛灉涓嶆槸姝ｅ湪绉诲姩 鍜� 娌℃湁鏆傚仠鎾斁灏辨墽琛�
+ if (!this.isMoveIn || !this.audio.paused) {
+ // 璁剧疆褰撳墠鏃堕棿
+ let MoveX =
+ this.$refs.progress.clientWidth *
+ (this.audio.currentTime / this.audio.duration);
+ //鎾斁鏃舵洿鏂拌窛绂�
+ this.$refs.currentProgress.style.width = MoveX + "px";
+ this.$refs.circle.style.left =
+ MoveX - this.$refs.circle.clientWidth / 2 + "px";
+ }
+ }
+ }
+};
+</script>
+
+<style lang="less" scoped>
+.videoBox {
+ height: 657px;
+ width: 100%;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+video {
+ width: 100%;
+ height: 100%;
+}
+
+.videoName {
+ text-align: center;
+ margin-top: 20px;
+ font-size: 30px;
+}
+.calssInfo {
+ margin-top: 20px;
+ height: 290px;
+ background-color: #e4e4e4;
+ margin-bottom: 20px;
+ padding: 30px;
+}
+.tabItem {
+ height: 220px;
+ .selected {
+ font-size: 14px;
+ color: #0079fe;
+ }
+}
+/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+ background-color: rgba(0, 121, 254, 1);
+ color: #fff !important;
+}
+/deep/ .el-tabs__item {
+ font-size: 16px;
+}
+</style>
--
Gitblit v1.9.1