Отображение html5 видео в ios без наложения кнопки воспроизведения

Я пытаюсь отобразить изображение, которое при нажатии откроет видеопроигрыватель в html 5, но я не хочу, чтобы над ним появилась небольшая полупрозрачная кнопка воспроизведения. Есть ли способ указать в теге не помещать этот значок поверх изображения плаката и просто отображать изображение плаката как есть?

Ответы

Ответ 1

Насколько мне известно, оверлей кнопки воспроизведения добавляется движком рендеринга в мобильном Safari, поэтому нет никакого способа скрыть его. Тем не менее, вы можете обманывать его с помощью ajax для загрузки видео при нажатии статического изображения. Например:

HTML

<div id="videoContainer">

</div>

CSS

#videoContainer {
  background-image: url(http://placehold.it/60x40.png);
  height: 40px;
  width: 60px;
}

JavaScript

$("#videoContainer").click(function() {
  $(this).css('background', 'none').parent().html("<video id=\"video\" width=\"60\" height=\"40\">\n" +
    "<source src=\"video.mp4\" type=\"video/mp4\">\n" +
    "<source src=\"video.ogg\" type=\"video/ogg\">\n" +
    "</video>");
  $("#video").get(0).play();
});

Ответ 2

Вы можете скрыть кнопку наложения play на iPhone с помощью всего лишь CSS:

video::-webkit-media-controls-start-playback-button {
  display: none;
}

Ответ 3

Вы должны попробовать это

video::-webkit-media-controls {
    display: none;
}