|
|
@@ -48,7 +48,8 @@
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="视频播放">
|
|
|
- <video v-if="videoUrl" ref="myvideo" :src="videoUrl" id="video" width="100%" height="300px" controls></video>
|
|
|
+ <video v-if="videoUrl.endsWith('mp4')" ref="myvideo" :src="videoUrl" id="video" width="100%" height="300px" controls></video>
|
|
|
+ <video v-if="videoUrl.endsWith('m3u8')" ref="myM3u8Video" :src="videoUrl" id="meu8Video" width="100%" height="300px" controls type="application/x-mpegURL"></video>
|
|
|
<div v-if="fileName">视频文件名: {{ fileName }}</div>
|
|
|
<div v-if="fileKey">文件Key: {{ fileKey }}</div>
|
|
|
<div v-if="fileSize">文件大小(MB): {{ (fileSize / (1024 * 1024)).toFixed(2) }} MB</div>
|
|
|
@@ -122,8 +123,9 @@
|
|
|
<script>
|
|
|
import { uploadObject } from "@/utils/cos.js";
|
|
|
import Pagination from "@/components/Pagination";
|
|
|
-// import { listVideoResource } from '@/api/course/videoResource';
|
|
|
-import { listLiveVideo, getLiveVideo, delLiveVideo, addLiveVideo, updateLiveVideo, exportLiveVideo } from "@/api/live/liveVideo";
|
|
|
+import { listLiveVideo } from "@/api/live/liveVideo";
|
|
|
+import Hls from 'hls.js';
|
|
|
+import {isEmpty} from "@/components/LemonUI/utils/validate";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -181,6 +183,9 @@ export default {
|
|
|
default: true,
|
|
|
}
|
|
|
},
|
|
|
+ destroyed() {
|
|
|
+ this.hls?.destroy();
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
videoName:'',
|
|
|
@@ -228,8 +233,21 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.reset();
|
|
|
+ if (this.videoUrl.endsWith(".m3u8")) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initPlayer()
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
+ videoUrl(newVal,oldVal){
|
|
|
+ console.log("触发数据改变")
|
|
|
+ if (this.videoUrl.endsWith(".m3u8")) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initPlayer()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
uploadType(newType) {
|
|
|
this.localUploadType = newType;
|
|
|
},
|
|
|
@@ -320,6 +338,29 @@ export default {
|
|
|
this.$message.error("线路一上传失败");
|
|
|
}
|
|
|
},
|
|
|
+ initPlayer() {
|
|
|
+ this.hls?.destroy();
|
|
|
+ if (Hls.isSupported()) {
|
|
|
+ const videoElement = this.$refs.myM3u8Video
|
|
|
+ if (!videoElement) {
|
|
|
+ console.error('找不到 video 元素')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.hls = new Hls();
|
|
|
+ this.hls.attachMedia(videoElement);
|
|
|
+ this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
|
|
|
+ this.hls.loadSource(this.videoUrl);
|
|
|
+ this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
|
|
|
+ videoElement.play();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.hls.on(Hls.Events.ERROR, (event, data) => {
|
|
|
+ console.error('HLS 错误:', data);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.error('浏览器不支持 HLS')
|
|
|
+ }
|
|
|
+ },
|
|
|
//上传华为云Obs
|
|
|
async uploadVideoToHwObs() {
|
|
|
try {
|
|
|
@@ -404,7 +445,11 @@ export default {
|
|
|
this.$emit("update:videoUrl", this.selectedVideo.videoUrl);
|
|
|
this.$emit("change", this.selectedVideo.videoUrl,this.selectedVideo.lineOne);
|
|
|
|
|
|
-
|
|
|
+ if (this.videoUrl.endsWith(".m3u8")) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initPlayer()
|
|
|
+ })
|
|
|
+ }
|
|
|
this.libraryOpen = false;
|
|
|
},
|
|
|
/** 取消视频选择 */
|