iphone видео изображение при загрузке не отображается

Question

Я отображаю видео на своей веб-странице со следующим текстом:

<div class="gl-bot-left">
    <video controls="">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

Это отлично работает на рабочем столе. Видео загружается, и вы можете увидеть изображение начала. Однако на iphone я получаю изображение кнопки воспроизведения вместо реального изображения. Когда я нажимаю его, видео начинается. Можно ли отобразить изображение для видео при его первой загрузке?

Answer 1

Объект HTML <video> имеет специфицированный атрибут c для вашего варианта использования: poster. Он указывает изображение, которое будет отображаться, пока воспроизведение вашего видео еще не началось.

<div class="gl-bot-left">
    <video controls="" poster="https://picsum.photos/id/1/200/300">
        <source src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/video.fixgasleaks.mp4" 
                type="video/mp4">Your browserdoes not support the video tag.
    </video>
</div>

Edit

Я действительно не могу сказать вам, почему он не работает на вашем iOs устройстве, но я могу предложить отличный обходной путь.

• добавьте HTML <image> с нужным изображением-заполнителем прямо перед тегом <video> и сгруппируйте эти два внутри <div>.
• , сделав изображение невидимым, установив скрыто
• позволяет создать пустой прозрачный .png размером 64x64x (или меньше) и использовать его в качестве плаката для видеоэлемента. Это позволит убедиться, что он не отображает первый кадр видео.
• наконец прослушивает событиеloadedMetaData, а внутри его функции обратного вызова изменяет размер изображения до размеров видео и устанавливает непрозрачность изображения на видимый

var video = document.querySelector('video');

function metaDataLoaded() {
  var image = document.querySelector('img');
  image.width = video.videoWidth;
  image.height = video.videoHeight;
  image.style.visibility = "visible";
}

.container img {
  position: absolute;
  visibility: hidden;
}

video {
  position: absolute;
}