From 56bc0990597bf3d9667b97b98bcfbb9092ad9df6 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期一, 15 七月 2024 16:46:35 +0800
Subject: [PATCH] 教学资源页面开发，分页，音频，类型图，下载，个人中心资料修改，密码修改，校验
---
src/components/VideoViewer/index.vue | 34 +++++++++++++++++++++++++++++++---
1 files changed, 31 insertions(+), 3 deletions(-)
diff --git a/src/components/VideoViewer/index.vue b/src/components/VideoViewer/index.vue
index 18ed0c6..2e1f2ff 100644
--- a/src/components/VideoViewer/index.vue
+++ b/src/components/VideoViewer/index.vue
@@ -1,25 +1,53 @@
<template>
<div class="video-container">
- <div id="player"></div>
+ <div class="video-content">
+ <video :src="props.videoUrl" class="video-player" controls ref="player"></video>
+ </div>
</div>
</template>
<script setup>
-import {ref} from 'vue';
-import Player from 'xgplayer';
+import {ref, onMounted, onBeforeUnmount} from 'vue';
const props = defineProps({
videoUrl: {
type: String,
required: true
+ },
+ poster: {
+ type: String,
+ default: ''
}
});
const player = ref(null);
+onMounted(() => {
+});
+
+onBeforeUnmount(() => {
+ player.value.pause();
+});
+
</script>
<style lang="scss" scoped>
+.video-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgba($color: #000000, $alpha: 0.5);
+ .video-content {
+ width: 70%;
+ height: 800px;
+ }
+}
+.video-player {
+ width: 100%;
+ height: 100%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0