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

问题描述

参见社区问题详情

此问题只会在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;
}
相关推荐
说私域44 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54588 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序