источник не отображается в браузере Safari на iPhone - PullRequest
0 голосов
/ 17 марта 2020

Я использую приведенный ниже код для отображения видео на моем веб-сайте:

<div class="item video-one">
   <video id="f-video" class="slide-video slide-media" autoplay="true" loop="" muted="" preload="metadata">

      <source src="http://myweb.com/name.mp4" type="video/mp4">

   </video>
</div>

Код работает правильно на всех устройствах, кроме iPhone (сафари). Я видел, что эта проблема случалась и с другими людьми, но я не нашел решения.

Знаете ли вы, есть ли исправление, или я просто найду другое решение моей проблемы? (возможно скрыть видео)

Спасибо

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

проблема была исправлена ​​добавлением playsinline внутри тега видео.

<video id="f-video" class="slide-video slide-media" autoplay="true" loop muted playsinline preload="metadata">
0 голосов
/ 18 марта 2020

Вы можете найти рекомендуемые настройки для WebKit, которые использует iOS, и примечания для iOS здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

Используя их пример, ниже будет играть на iPhone (проверено на iPhone 7 работает iOS 13.3.1

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Simple iOS Video Test</title>
</head>

<body>
  <h1>Video Test</h1>
  <video autoplay loop muted playsinline>
      <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
</body>

</html>

Изменение вышеприведенного кода для использования HTML5 и тот же вид, что и выше, также работает - протестировано на том же тестовом устройстве:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple iOS Video Test</title>
</head>

<div class="item video-one">
   <video id="f-video" class="slide-video slide-media" autoplay="true" loop="" muted="" preload="metadata">

      <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">

   </video>
</div>

</html>

Итак, ваш HTML работает. Вы можете обнаружить, что проблема связана с вашим видеоформатом - это частая причина того, что видео не воспроизводится с одного устройства на другое.

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