在没有播放按钮覆盖的情况下在ios中显示html5视频

Question

我正在尝试显示一个图像，当点击它将打开html 5中的视频播放器，但我不希望小半透明播放按钮出现在它上面。有没有办法在标签中指定不将该图标放在海报图像上，只是按原样显示海报图像？

Answer 1

您可以使用一些CSS隐藏iPhone上的叠加播放按钮：

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

Answer 2

更新：这不再是最佳方法 - 请参阅下面的this回答了解实际解决方案。

---

据我所知，播放按钮覆盖由移动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();
});

Answer 3

你应该试试这个

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