网站优化用户体验推广普通话宣传标语
uniapp 电商app商品详情页视频播放
类似于上图的这种形式，商品视频是可以播放展示的。
但是由于uniapp中的video组件的坑，导致视频永远在第一层，如果是商品轮播图中是视频与图片的集合，则视频永远都是在最上层，左右切换时是看不到图片的。
最终的解决方法就是：
在商品详情页面中还是图片的集合，在视频部分，是底图+播放按钮的组合。
当点击此部分进行视频播放时，将视频全屏播放，只有当视频退出全屏播放时，再显示为图片。
部分代码如下：
遍历detail.meddias这个数组，里面可以渲染所有的图片或者视频。
数组中有个参数：mediaType，如果参数为0，则为图片，否则为视频。
视频的展示方式是：图片+播放按钮的形式。
<swiper indicator-dots circular=true @change="swiperChange" duration="400"><swiper-item class="swiper-item" v-for="(item,index) in detail.medias" :key="index"><view class="image-wrapper" v-if="item.mediaType === 0"><image:src="item.mediaUrl" class="loaded" mode="aspectFill"></image></view><view class="image-wrapper" style="position: relative;" @click="toPlayVideo(item.mediaUrl)" v-else><image:src="detail.medias[1].mediaUrl"class="loaded" mode="aspectFill"></image><image mode="aspectFill" class="loaded" style="width: 60px;height: 60px;position: absolute;top: 50vw;left: 40vw;" src="../../static/play.png"></image></view></swiper-item>
</swiper>
点击视频封面图时，触发的函数如下：
toPlayVideo(url){this.videoUrl = url;setTimeout(()=>{this.videoContext = uni.createVideoContext('myVideo');this.videoContext.requestFullScreen({ direction: 0 });this.videoContext.play();},100)
}
此处的videoUrl就是视频的播放链接，这个链接如果有内容，则全屏播放视频，如果没有内容，则隐藏。
video组件的代码如下：
<video style="position: fixed;width: 0px;height: 0px;" v-show="videoUrl" id="myVideo" @fullscreenchange="changeFull" object-fit="contain" :src="videoUrl"></video>
video组件全屏展示的话,style样式应该是position:fixed;top:0;left:0;这样就全屏展示了。
v-show用于判断video组件的显示与隐藏，如果有视频链接则展示，如果没有则不展示。
id:myVideo，id可以用来确定视频组件的唯一性。
@fullscreenchange 监听video是否全屏，如果参数为true,则为全屏，否则不为全屏。
object-fit:视频的展示形式，contain保证视频能够展示全，展示不全的部分黑色底展示。
src:指定的video组件的视频链接。
监听视频全屏的触发函数：
changeFull(e){if(!e.detail.fullScreen){this.videoContext.stop();this.videoUrl = false;}
}