Как скрыть HTML5 управления видео на iOS 12 - PullRequest
0 голосов
/ 30 октября 2018

Видеоплеер HTML5 показывает элементы управления только в iOS 12.x.x, даже если для элементов управления установлено значение false в теге video, но все остальные браузеры работают нормально и не отображают управление.

Сценарий заключается в том, что всякий раз, когда страница загружается, мы автоматически воспроизводим видео на баннере, но если функция экономии заряда батареи включена, то она не будет автоматически воспроизводиться, видео показывает кнопку воспроизведения с исходным уменьшенным изображением (только в iOS 12.xx), в то время как в других браузерах показывает начальный эскиз видео без кнопки воспроизведения.

Мой код выглядит так:

<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
  // sources here
</video>

Я ищу решение, чтобы скрыть этот значок воспроизведения (показанный на прикрепленном изображении), но если это невозможно, то есть ли какое-либо решение, с помощью которого я могу узнать, что включен режим энергосбережения, и скрыть видео (потому что у меня есть фон для обратной совместимости).

**enter image description here**

Ответы [ 2 ]

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

Удаление атрибута управления из тега Video будет работать

Примечание. Значения "true" и "false" недопустимы для логических атрибутов. Чтобы представить ложное значение, атрибут должен быть вообще опущен.

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

Я также посмотрел, и кажется, что многие решения CSS и JavaScript там больше не работают, потому что с iOS 12 появился новый способ обработки видео (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).

Теперь мне пришла в голову эта идея, которая, как пурист, мне не нравится, но она могла бы сработать: миниатюра видео (в виде изображения), наложенная поверх видео, которая скрывается при запуске видео.

Вы можете иметь стандартный эскиз с заголовком или динамически сгенерировать его (см. http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png как идею).

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...