优化视频的展示方式

kingwrcy · May 10, 2024 · 523423b · 523423b
1 parent 3515e2b
commit 523423b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/components/FriendsMemo.vue b/components/FriendsMemo.vue
@@ -26,8 +26,8 @@
       <iframe class="w-full h-[250px] my-2" v-if="memoExt.youtubeUrl" :src="memoExt.youtubeUrl" scrolling="no"
         border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
 
-      <video class="w-full h-[250px] my-2" :src="memoExt.videoUrl" controls v-if="memoExt.videoUrl"></video>
-      <video class="w-full h-[250px] my-2" :src="memoExt.localVideoUrl" controls v-if="memoExt.localVideoUrl"></video>
+      <video class="w-2/3 my-2 rounded" :src="memoExt.videoUrl" controls v-if="memoExt.videoUrl"></video>
+      <video class="w-2/3 my-2 rounded" :src="memoExt.localVideoUrl" controls v-if="memoExt.localVideoUrl"></video>
 
       <DoubanBook :book="memoExt.doubanBook" v-if="memoExt.doubanBook" />
       <DoubanMovie :movie="memoExt.doubanMovie" v-if="memoExt.doubanMovie" />
@@ -295,7 +295,7 @@ watchOnce(height, () => {
 .full-cover-image-single {
   object-fit: cover;
   object-position: center;
-  max-height: 200px;
+  max-height: 300px;
   height: auto;
   width: auto;
   border: transparent 1px solid;

diff --git a/components/MemoInput.vue b/components/MemoInput.vue
@@ -207,14 +207,14 @@
       frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
 
     <div class="relative"  v-if="videoIfrUrl">
-      <video class="w-full h-[250px] my-2" :src="videoIfrUrl" controls></video>
-      <Trash2 color="rgb(234 88 12)" :size="15" class="absolute top-1 right-1 cursor-pointer"
+      <video class="w-2/3 my-2" :src="videoIfrUrl" controls></video>
+      <Trash2 color="rgb(234 88 12)" :size="15" class="absolute top-1 right-1 cursor-pointer rounded"
         @click="videoIfrUrl = ''; videoUrl = ''" />
     </div>
 
     <div class="relative" v-if="localVideoUrl && !localVideoUploading">
-      <video class="w-full h-[250px] my-2" :src="localVideoUrl" controls></video>
-      <Trash2 color="rgb(234 88 12)" :size="15" class="absolute top-1 right-1 cursor-pointer"
+      <video class="w-2/3 my-2" :src="localVideoUrl" controls></video>
+      <Trash2 color="rgb(234 88 12)" :size="15" class="absolute top-1 right-1 cursor-pointer rounded"
         @click="localVideoUploading = false; localVideoUrl = ''" />
     </div>
     <div v-if="localVideoUploading" class="text-sm my-2">视频上传中,请耐心等待上传完成!</div>
@@ -557,14 +557,14 @@ const importVideo = () => {
   bilibiliOpen.value = false
 }
 
-const validVideoTypes = ['video/mp4', 'video/webm', 'video/ogg']
+const validVideoTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime']
 const uploadLocalVideo = async (event: Event) => {
   const file = (event.target as HTMLInputElement).files?.[0]
   if (!file) {
     return
   }
   if (!validVideoTypes.includes(file.type)) {
-    toast.warning('不支持的视频类型,只支持mp4/webm/ogg格式.')
+    toast.warning('不支持的视频类型,只支持mp4/webm/ogg/mov格式.')
     return;
   }
   bilibiliOpen.value = false