Bläddra i källkod

modify video 4:3 to 11:6

xieren 4 år sedan
förälder
incheckning
eefc49cb5c

+ 8 - 4
src/components/common/UploadVideoFileNew.vue

@@ -44,7 +44,8 @@
       <div v-if="videoItem && videoItem.videoUrl" class="video-mask">
         <video-play
           videoId="videoId"
-          :videoItem="videoItem"
+          :video-item="videoItem"
+          :video-height="388"
           @closeVideo="closeVideo"
         ></video-play>
       </div>
@@ -170,7 +171,8 @@ export default {
         const filesArr = [...filesList];
         // ?x-oss-process=video/snapshot,t_0,f_jpg,w_800,h_600,m_fast,ar_auto
         filesArr.forEach(item => {
-          this.video.img = `${item.url}?x-oss-process=video/snapshot,t_0,f_jpg,w_544,h_408,m_fast,ar_auto`;
+          // this.video.img = `${item.url}?x-oss-process=video/snapshot,t_0,f_jpg,w_544,h_408,m_fast,ar_auto`;
+          this.video.img = `${item.url}?x-oss-process=video/snapshot,t_0,f_jpg,w_544,h_297,m_fast,ar_auto`;
           this.video.video = item.url || "";
           this.video.uri = item.uri || "";
           this.video.domain = item.domain || "";
@@ -248,12 +250,14 @@ export default {
   .video-wrap {
     position: relative;
     width: 112px;
-    height: 84px;
+    // height: 84px;
+    height: 61px;
     margin: 14px 14px 14px 0;
 
     .el-image {
       width: 112px;
-      height: 84px;
+      // height: 84px;
+      height: 61px;
       cursor: grabbing;
     }
     .iconfontplay {

+ 15 - 1
src/components/common/VideoPlay.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="video-inner animated zoomIn" @click.stop="handleBubble">
+  <div
+    class="video-inner animated zoomIn"
+    :style="`width: ${videoWidth}px;height: ${videoHeight}px;`"
+    @click.stop="handleBubble"
+  >
     <video
       :id="videoId"
       class="video-js vjs-big-play-centered video-player player"
@@ -27,6 +31,16 @@ export default {
       default: () => {
         return "myVideo";
       }
+    },
+    videoWidth: {
+      type: Number,
+      required: false,
+      default: 711
+    },
+    videoHeight: {
+      type: Number,
+      required: false,
+      default: 401
     }
   },
   data() {

+ 6 - 3
src/components/daily4StudyAbroad/video/CreateEdit.vue

@@ -184,7 +184,8 @@
             <coropper-upload-file
               v-if="isShowCoropper"
               content-type="run/videoImg"
-              tips="仅支持JPG、PNG等格式的图片,限制大小不超1MB,宽高比4:3"
+              tips="仅支持JPG、PNG等格式的图片,限制大小不超1MB,宽高比11:6"
+              :proportion="11 / 6"
               :limit-size-level="1 * 1024"
               @onSuccess="handleCoropperSuccess"
               @onCancel="isShowCoropper = false"
@@ -640,11 +641,13 @@ export default {
   .item {
     position: relative;
     width: 112px;
-    height: 84px;
+    // height: 84px;
+    height: 61px;
     margin: 14px 14px 14px 0;
     .el-image {
       width: 112px;
-      height: 84px;
+      // height: 84px;
+      height: 61px;
       cursor: grabbing;
     }
     .colse {

+ 2 - 1
src/components/daily4StudyAbroad/video/Detail.vue

@@ -162,7 +162,8 @@
       >
         <video-play
           videoId="detailVideoId"
-          :videoItem="currentVideoItem"
+          :video-item="currentVideoItem"
+          :video-height="388"
           @closeVideo="closeVideo"
         ></video-play>
       </div>