uniapp视频封面层级问题

发布时间 2023-10-23 15:11:07作者: 小虾米吖~

1、app端建议使用视频的第一帧作为视频封面,自定义封面遮罩无法显示,当封面图是白色背景时看不到视频播放按钮。

2、h5直接使用封面属性可正常展示。

 

<!-- #ifdef APP-PLUS -->
                <!-- app使用视频的第一帧作为封面,自定义封面没显示遮罩,浅色封面看不到按钮 -->
                <video id="myVideo" object-fit="cover"
                    :poster="courseInfo.course.url+'?x-oss-process=video/snapshot,t_0,f_jpg'"
                    :show-fullscreen-btn="true" :src="courseInfo.course.url" controls :enable-play-gesture="true"
                    @play="toPlay" @pause="toPause" @timeupdate="timeupdate">
                <!-- #endif -->
                
                <!-- #ifdef H5 -->
                <video id="myVideo" object-fit="cover"
                    :poster="courseInfo.course.thumb"
                    :show-fullscreen-btn="true" :src="courseInfo.course.url" controls :enable-play-gesture="true"
                    @play="toPlay" @pause="toPause" @timeupdate="timeupdate">
                <!-- #endif -->
                </video>

app使用封面属性poster 作为视频封面的效果:

 

 

app使用视频第一帧作为视频封面的效果: