Видео выглядит невидимым на iPhone - PullRequest
Новая
       17

Видео выглядит невидимым на iPhone

1 голос
/ 12 июня 2019

Я добавляю видео на свой веб-сайт, и это прекрасно работает на настольных компьютерах и в браузерах Android Chrome.В iOS Safari, однако, видео не отображается, оно показывает только кнопку воспроизведения, а не предварительный просмотр видео, как в других браузерах.

Если я нажму кнопку воспроизведения, будет воспроизведено видео, которое будет отображаться и воспроизводиться, как и ожидалось.Я не уверен, почему iOS Safari не будет отображать предварительный просмотр видео, как другие браузеры, и я хотел бы разрешить его.Я попытался отключить и включить элементы управления, полностью избавиться от функции нажатия jQuery и попробовать другое видео.Если бы я решил удалить элементы управления, он бы выглядел как пустое поле и работал бы только в том случае, если бы я щелкнул в том месте, где будет видео.

Помощь приветствуется.

HTML 

<div class="row video-row">
  <div class="col-sm-12">
    <div class="vid-wrapper">
      <video class="video" controls playsinline>
        <source src="/public/video/grapevine.mp4" type="video/mp4">
        <source src="/public/video/video/grapevine.ogg" type="video/ogg">
        Sorry, your browser does not support this video.
      </video>
    </div><!-- END WRAPPER -->
  </div><!-- END COL -->
</div><!-- END ROW -->

1 Ответ

1 голос
/ 20 июня 2019

Я знаю, это звучит контрпродуктивно, но если вы добавите autoplay, браузер iOS добавит «изображение». В основном autoplay на iOS инициирует воспроизведение (как вы нажали кнопку воспроизведения), но на самом деле не будет играть (как если бы оно было приостановлено в первом кадре). Это может работать только в некоторых контекстах, например, если вызывается API видео для загрузки видео с помощью EventListener, оно фактически будет воспроизводиться автоматически.

UPDATE: На самом деле, я считаю, что вы ищете poster="../img.jpg", где вы просто определяете изображение плаката в атрибуте тега видео. Мне придется определять, создавать и размещать изображения так или иначе. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes

...