视频播放优化

pages/video/videoList.vue

@@ -35,12 +35,16 @@
                     <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
                 </button>
                 <video
+                    autoplay
                     object-fit="cover"
                     show-mute-btn
                     :poster="item.cover_img_url"
                     :src="item.video_url"
                     enable-play-gesture
+                    :id="item.community_video_id"
+                    v-if="item.community_video_id==curVideoId"
                 ></video>
+                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
                 <view class="time">发布时间：{{item.publish_time}}</view>
             </view>
         </view>
@@ -102,7 +106,9 @@ export default {
             page:1,
             pageSize:10,
             finished:false,
-            list:[]
+            list:[],
+
+            curVideoId:0,
         }
     },
     onLoad(options){
@@ -185,6 +191,10 @@ export default {
             if(res.code===200){
                 this.options=res.data
             }
+        },
+
+        handelClickPlay(item){
+            this.curVideoId=item.community_video_id
         }
     },
 }
@@ -270,6 +280,25 @@ export default {
                 margin: 30rpx 0 20rpx 0;
                 border-radius: 20rpx;
             }
+            .poster{
+                width: 100%;
+                height: 400rpx;
+                margin: 30rpx 0 20rpx 0;
+                border-radius: 20rpx;
+                position: relative;
+                &::after{
+                    content:'';
+                    display: block;
+                    position: absolute;
+                    width: 120rpx;
+                    height: 120rpx;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                    background-image: url('@/static/video-play-btn.png');
+                    background-size: cover;
+                }
+            }
             .time{
                 font-size: 28rpx;
                 color: #999;

pages/video/videoSearch.vue

@@ -30,11 +30,16 @@
                     <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
                 </button>
                 <video
+                    autoplay
                     object-fit="cover"
                     show-mute-btn
                     :poster="item.cover_img_url"
                     :src="item.video_url"
+                    enable-play-gesture
+                    :id="item.community_video_id"
+                    v-if="item.community_video_id==curVideoId"
                 ></video>
+                <image @click="handelClickPlay(item)" v-else class="poster" :src="item.cover_img_url" mode="aspectFill" lazy-load/>
                 <view class="time">发布时间：{{item.publish_time}}</view>
             </view>
         </view>
@@ -56,6 +61,8 @@ export default {
             finished:false,
             page:1,
             pageSize:10,
+
+            curVideoId:0,
         }
     },
     onReachBottom() {
@@ -109,6 +116,10 @@ export default {
                 }
             }
         },
+
+        handelClickPlay(item){
+            this.curVideoId=item.community_video_id
+        }
     },
 }
 </script>
@@ -180,6 +191,25 @@ page{
                 margin: 30rpx 0 20rpx 0;
                 border-radius: 20rpx;
             }
+            .poster{
+                width: 100%;
+                height: 400rpx;
+                margin: 30rpx 0 20rpx 0;
+                border-radius: 20rpx;
+                position: relative;
+                &::after{
+                    content:'';
+                    display: block;
+                    position: absolute;
+                    width: 120rpx;
+                    height: 120rpx;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                    background-image: url('@/static/video-play-btn.png');
+                    background-size: cover;
+                }
+            }
             .time{
                 font-size: 28rpx;
                 color: #999;