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

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

2357

2018-01-21 13:07

起源

答案:

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

2018-01-21 14:09

唉因为iOS的限制，只有那种作品，你不能自动播放电影。然而，它确实适用于我需要它。 - user439407

答案:

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();
});

2018-01-21 14:09

唉因为iOS的限制，只有那种作品，你不能自动播放电影。然而，它确实适用于我需要它。 - user439407

您可以隐藏叠加层玩 iPhone上的按钮只有一些CSS：

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

2018-04-04 11:10

这正是我所需要的。谢谢。 - Andi

@ bfred.it我添加了这个[html appendFormat：@“video {webkit-media-controls：none}”];不适合我。 - Jitendra

你应该试试这个

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

2017-10-14 09:33

这会隐藏所有控件，包括那些提出的控件 controls Chrome和Safari中的属性 - bfred.it

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

答案:

答案:

热门问题

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