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

【问题标题】：displaying html5 video in ios without play button overlay在没有播放按钮覆盖的情况下在 ios 中显示 html5 视频
【发布时间】：2018-11-21 00:44:31
【问题描述】：

我正在尝试显示一个图像，单击该图像会在 html 5 中打开一个视频播放器，但我不希望小半透明播放按钮出现在它上面。有什么方法可以在标签中指定不要将该图标放在海报图片上，而是按原样显示海报图片？

【问题讨论】：

标签： ios html video

【解决方案1】：

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

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

【讨论】：

@bfred.it 我已经添加了这个 [html appendFormat:@"video { webkit-media-controls: none}"];不适合我。
@Jitendra 你把它放在哪里了，在style 标签中？

【解决方案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();
});

【讨论】：

唉，由于 iOS 的限制，只有某种作品，你不能自动播放电影。但是它确实可以满足我的需要。

【解决方案3】：

你应该试试这个

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

【讨论】：

这会隐藏所有控件，包括那些在 Chrome 和 Safari 中带有 controls 属性的控件