仅在播放时显示视频控件,而不是在加载时显示

时间:2017-06-10 17:37:56

标签: html5 video thumbnails poster

我有一个关于嵌入带有可点击缩略图的视频的问题。我即将修改视频标签以显示点击播放的海报图片:

<video width="569" height="569" controls="controls" poster="images/thumbnail.png" onclick="this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>

但是,视频控制条在加载时会显示在海报图像上。是否可以修改此代码,以便控制栏仅在视频开始播放时出现?我可以省略所有togeter的控制标签,但它根本不会出现。

如果有人有任何想法或者我可以尝试其他方法,请告诉我。

谢谢!

1 个答案:

答案 0 :(得分:0)

只需排除controls属性,然后使用onclick事件将其设置为true。如果您想稍后删除它们,您可以将该属性设置为false

<video width="569" height="569" poster="images/thumbnail.png" onclick="this.controls=true;this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>