Видео автоматически открывается в браузере Safari, iPhone

У меня есть раздел, где воспроизводится зацикленное видео без звука без доступа к элементам управления.

Буквально вчера я обнаружил проблему с браузером Safari, так как он открывает это видео на весь экран, с включенным звуком и элементами управления, а когда видео достигает конца, видео просто сворачивается, как ни в чем не бывало. Это происходит каждый раз, когда страница отображается.

Проведя некоторое исследование, я попытался добавить playsinline (который в реакции представляет собой playInline) и даже webkit-playsinline="true". Но, как оказалось, браузер Safari позволяет открывать это видео только тогда, когда вы прокручиваете вниз до просмотра этого видео. Но я вообще не хочу, чтобы его открывали, я хочу, чтобы он оставался статичным.

Как запретить открытие видео в полноэкранном режиме в браузере Safari?

Вот пример того, как выглядит мой тег видео:

<video autoPlay muted loop>
    <source
      type = "video/mp4"
      src = {mainVideo}
      autoPlay
      muted
      loop
      playsInline
      webkit-playsinline = "true"
    ></source>
</video>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
75
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, вы были правы, добавив атрибуты playsInline и webkit-playsinline = "true" к своему элементу видео. Но сафари порой может быть непредсказуемым. Так что, возможно, попробуйте добавить атрибут controlsList со значением nodownload к вашему элементу видео. Этот атрибут предотвращает появление элементов управления видео, что может помочь предотвратить полноэкранное поведение.

См. код ниже.

<video autoPlay muted loop controlsList = "nodownload">
  
Hope that helps :)

Другие вопросы по теме