视频播放修改

src/views/video/List.vue

@@ -85,6 +85,13 @@ const onLoad=()=>{
     getVideoList()
 }
 
+//当前正在播放哪个
+let curVideoId=ref(0)
+const handelClickPlay=(item)=>{
+    curVideoId.value=item.community_video_id
+}
+
+
 //获取视频单个对应的小程序二维码
 const handelGetQRCodeImg=async (item)=>{
     const res=await apiGetWechatQRCode({
@@ -184,7 +191,10 @@ onActivated(()=>{
                         :poster="item.cover_img_url"
                         controlslist="nodownload"
                         disablePictureInPicture
+                        autoplay
+                        v-if="item.community_video_id==curVideoId"
                     ></video>
+                    <div v-else class="poster-img" :style="'background-image:url('+item.cover_img_url+')'" @click="handelClickPlay(item)"></div>
                     <div class="time">发布时间：{{item.publish_time}}</div>
                 </div>
             </div>
@@ -292,6 +302,26 @@ onActivated(()=>{
                 object-fit: cover;
                 margin: 19px 0;
             }
+            .poster-img{
+                width: 100%;
+                height: 200px;
+                margin: 19px 0;
+                position: relative;
+                background-size: cover;
+                cursor: pointer;
+                &::after{
+                    content:'';
+                    display: block;
+                    position: absolute;
+                    width: 80px;
+                    height: 80px;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                    background-image: url('@/assets/video-play-btn.png');
+                    background-size: cover;
+                }
+            }
             .time{
                 color: #999;
                 font-size: 14px;