Элемент HTML5 Video на iPhone имеет границу - PullRequest
Новая
       15

Элемент HTML5 Video на iPhone имеет границу

0 голосов
/ 26 сентября 2018

Я недавно создавал приложение и загружал анимацию с самого начала (просто видео в формате mp4 - для эстетических целей).Он отлично работает везде, кроме на Iphone.

Проблема в том, что вокруг некоторых видео есть серая линия, а не на каждой стороне.Если я попытаюсь сделать скриншот страницы, строки больше не видны.

Я использую iphone 7 plus и ios safari.Чтобы убедиться в этом, смотрите - https: pathfinder-new.herokuapp.com

Цель состоит в том, чтобы он был бесшовным с белым фоном - пример можно увидеть на рабочем столе по указанному выше адресу.

Приветствия, Тим

enter image description here

Ответы [ 3 ]

0 голосов
/ 11 ноября 2018

Я должен был пойти с приближением 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%;
}
0 голосов
/ 14 декабря 2018

Я боролся в течение нескольких часов и нашел, что это единственный способ удалить его (протестировано на Safari, Chrome и Firefox на iOS): 

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

Взято из этогосуть

0 голосов
/ 26 сентября 2018

Я попробовал, чтобы на iOS 12 установили iPad WiFi 2017 на Safari и все было хорошо.У вас есть шанс снять видео с другого записывающего устройства?

Редактировать: Очиститель общего вида -webkit-appearance: none может помочь.

...