小程序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;
}
相关推荐
2501_915918415 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张7 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差16 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张18 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬19 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063219 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI20 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_1772972206921 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld21 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄1 天前
mobx-miniprogram小程序的数据传输
小程序