小程序video标签在底部出现1px无法去除的黑色线

问题描述

参见社区问题详情
此问题只会在ios手机真机中出现,视频底部出现1px无法去除的黑色线

解决方法

1.尝试过video各种配置,以为是设置参数导致
2.尝试过父元素设置height:200px;overflow:hidden;video标签设置height:210px;按理说此方式应该成功,可能自己没有认真调试,反正试了一下不行就没测试了
3.最终解决方式为,写一个view颜色与背景色一致,强行position定位到video底部,直接遮挡,虽然很不想这样(有点呆瓜),唉,无奈出此下策,实非吾所愿也!

代码如下
// html
<video 
    :src="你的路径"
    autoplay 
    loop
    muted
    :controls="false"
    :show-progress="false"
    :show-play-btn="false"
    :show-center-play-btn="false"
    :show-fullscreen-btn="false"
    :enable-progress-gesture="false"
    initial-time='1'
    object-fit='cover'
    class="video"
>
    <!-- 此处一定不能写cover-view标签,会导致层级无法控制,线条遮挡你的页面其他元素 -->
    <view class="coverView"></view>
</video>

// css
.video{
    // 此处写relative,因为我的父元素有了relative,所以这里是absolute
    // position: absolute;
    position: relative;
    height:300px;
    width: 200px;
    // 可以不加,我的项目有层级所以写了z-index
    // z-index: 1;
}
.coverView{
    width: 200px; 
    height:4px;
    // 此处写你自己的背景色
    background: #FFEFAC;
    position: absolute;
    bottom: 0;
}

你可能感兴趣的:(微信小程序,小程序,video底部黑线,小程序video兼容,video,ios,bug)