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

刘白超2023-11-07 4:05

问题描述

参见社区问题详情

此问题只会在ios手机真机中出现，视频底部出现1px无法去除的黑色线

解决方法

1.尝试过video各种配置，以为是设置参数导致

2.尝试过父元素设置height：200px；overflow：hidden；video标签设置height：210px；按理说此方式应该成功，可能自己没有认真调试，反正试了一下不行就没测试了

3.最终解决方式为，写一个view颜色与背景色一致，强行position定位到video底部，直接遮挡，虽然很不想这样（有点呆瓜），唉，无奈出此下策，实非吾所愿也！

代码如下

javascript 复制代码

// 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;
}