IPhone上的HTML5视频元素有边框
我最近一直在开发一个应用程序,并在一开始播放一个加载动画(只是一个mp4视频-出于审美目的)。除了在Iphone上,它在任何地方都能正常工作 问题是在一些视频周围有一条灰色的线——不是每一边都一样。如果我尝试截屏页面,线条将不再可见 我正在使用iPhone7 plus和ios safari。要亲自查看,请参阅-https:pathfinder-new.herokuapp.com 其目标是使其与白色背景无缝连接——示例可在上述地址的桌面上看到 干杯, 提姆IPhone上的HTML5视频元素有边框,html,video,html5-video,Html,Video,Html5 Video,我最近一直在开发一个应用程序,并在一开始播放一个加载动画(只是一个mp4视频-出于审美目的)。除了在Iphone上,它在任何地方都能正常工作 问题是在一些视频周围有一条灰色的线——不是每一边都一样。如果我尝试截屏页面,线条将不再可见 我正在使用iPhone7 plus和ios safari。要亲自查看,请参阅-https:pathfinder-new.herokuapp.com 其目标是使其与白色背景无缝连接——示例可在上述地址的桌面上看到 干杯, 提姆 我在iOS 12上试过,在Safari上
我在iOS 12上试过,在Safari上安装了iPad WiFi 2017,一切都很好。你有机会用另一台录音设备录下那个小故障吗
编辑:通用外观清理器
-webkit外观:无
可能会起作用。我必须使用包装器div和位置绝对值div,类似于:
HTML
<div class="wrapper">
<video loop muted autoplay playsinline>
<source src="./video.mp4" type="video/mp4">
<source src="./video.webm" type="video/webm">
<source src="./video.ogv" type="video/ogg">
</video>
<div class="video-ios-border-fix"></div>
</div>
我苦苦挣扎了几个小时,发现这是删除它的唯一方法(在iOS上的Safari、Chrome和Firefox上进行了测试):
灵感来自我添加了一张照片-没想到会这么做哈!这使得线条在底部、左侧和右侧变得更加突出,而不是顶部,但不幸的是,这不起作用。Safari、Firefox和Chrome在iOS上的行为相同:边框仍然呈现在
.video iOS border fix
元素的内边缘上。我在iOS 12.1上。@ifthenelse将边框设为红色,再大一点,看看效果如何。将包装器div设置为更高的z索引,仍然不起作用?在那里,仍然在红色边框的内侧渲染边框。我在iOS 14上使用safari mobile。这个把戏行得通,但我想不出原因。正如我所研究的,蒙版图像默认使用alpha蒙版,所以它应该在白色和黑色之间没有区别吗?@sdym我也很困惑,没有明显的原因。该边框不应首先显示,因此我假设这是Safari在特定条件下渲染视频元素时创建的某种工件。还修复了Big Sur上Safari 14.1上的类似视频错误,这些精细边框仅在滚动时出现,在再次移动光标时消失。
.wrapper {
display: block;
position: relative;
font-size: 0;
}
.video-ios-border-fix {
position: absolute;
z-index: 1;
box-sizing: initial;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 4px solid #fff;
}
video {
width: 100%;
}
video {
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}