I have a question about an embedding a video with a clickable thumbnail. I was about to modify a video tag to display a poster image that is click-to-play:
<video width="569" height="569" controls="controls" poster="images/thumbnail.png" onclick="this.play()"><source type="video/mp4" src="videos/clip.mp4" /></video>
However, the video control bar appears overlayed on the poster image when it loads. Is it possible to modify this code so that the control bar only appears once the video starts playing? I could omit the control tag all togeter, but then it would not appear at all.
Let me know if anyone has any ideas or if I could try an alternate approach.
Thanks!
Simply exclude the controls attribute, and then use the onclick event to set it true. If you want to remove them later you would set the attribute to 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>