【问题标题】:HTML5 Video element on IPhone has borderiPhone 上的 HTML5 视频元素有边框
【发布时间】:2018-09-26 01:12:17
【问题描述】:

我最近一直在构建一个应用程序,并在开始时播放加载动画(只是一个 mp4 视频 - 出于审美目的)。除了在 Iphone 上,它在任何地方都很好用。

问题在于,某些视频周围有一条灰线 - 每一边都不一样。如果我尝试截取页面,则线条不再可见。

我正在使用 iphone 7 plus 和 ios safari。亲眼看看 - https:pathfinder-new.herokuapp.com

目标是让它与白色背景无缝 - 示例可以在上面的地址的桌面上看到。

干杯, 蒂姆

【问题讨论】:

    标签: html video html5-video


    【解决方案1】:

    我已经挣扎了几个小时,发现这是删除它的唯一方法(在 iOS 上的 Safari、Chrome 和 Firefox 上测试):

    video {
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
    }
    

    灵感来自this gist

    【讨论】:

    • 我在 iOS 14 上使用 safari mobile。这个技巧有效,但我不知道原因。正如我研究的那样,mask-image 默认使用 alpha 蒙版,所以它应该没有白色和黑色之间的区别?
    • @sdym 我也很困惑,没有明显的理由应该这样做。该边框不应该首先显示,所以我认为这是 Safari 在特定条件下的视频元素渲染上创建的某种工件。
    • 还修复了 Big Sur 上 Safari 14.1 上的一个类似视频错误,即那些细边框仅在滚动时出现,再次移动光标时消失。
    • 你拯救了我的一天!谢谢!
    • 在 iOS15 beta 上测试过,这是我发现的唯一可行的解​​决方案。不知道为什么会这样,但谢谢!
    【解决方案2】:

    我在 iOS 12 上尝试在 Safari 上安装 iPad WiFi 2017,一切都很好。你有没有机会用另一台录音设备录下这个故障?

    编辑:一般外观清洁器-webkit-appearance: none 可能会解决问题。

    【讨论】:

    • 我添加了一张照片 - 没想到会这样做哈哈!
    • 这使得线条在底部、左侧和右侧而不是顶部变得更加突出,但没有运气:/
    【解决方案3】:

    我不得不采用包装器 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>
    

    CSS

    .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%;
    }
    

    【讨论】:

    • 不幸的是,这不起作用。 iOS 上的 Safari、Firefox 和 Chrome 上的行为相同:边框仍呈现在 .video-ios-border-fix 元素的内边缘。我在 iOS 12.1 上。
    • @ifthenelse 使边框变红,更大,看看效果如何。将包装器 div 设置为更高的 z-index,仍然无法正常工作?
    • 去过那里,仍然在红色边框的内侧渲染边框。
    猜你喜欢
    • 1970-01-01
    • 2017-03-18
    • 2017-06-29
    • 2014-01-12
    • 2011-11-07
    • 2018-05-11
    • 1970-01-01
    • 2014-11-29
    • 2015-08-31
    相关资源
    最近更新 更多