我正在尝试显示一个图像,单击该图像时将打开html 5中的视频播放器,但我不希望在其上方出现半透明的小播放按钮。 有没有办法在标签中指定不要将该图标放在海报图像上,而只是按原样显示海报图像?
您只需使用一些CSS即可隐藏iPhone上的叠加播放按钮:
video::-webkit-media-controls-start-playback-button {
display: none;
}
更新:这不再是最好的方法 - 有关实际解决方案,请参阅下面的答案。
据我所知,播放按钮叠加层是由移动 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();
});
你应该试试这个
video::-webkit-media-controls {
display: none;
}