How do I create or overlay a video play button for a HTML Video component if I have Show Controls turned off? Would like to have a visual indicator that clicking on the video will play the video.
Hi @coherent_piranha! A possible way to accomplish that is to create a free-positioned overlay on top of the video, like in the attached screen recording.
@tiago - Wonderful, it works well. I tried to figure out how to hide the play button after clicking on it, then show play button after video finishes…but have not been successful - can you point me in the right direction to accomplish this?
UPDATE: I was able to figure it out by adding an element id to my play button then modifying the code to:
document.getElementById('pb1').style.visibility = 'hidden';
event.currentTarget.querySelector('video').play();
event.currentTarget.querySelector('video').addEventListener('ended', function(e) {
document.getElementById('pb1').style.visibility = 'visible';
})
If you have a better way of doing this, let me know. Thanks!
That is a valid approach! Another way to accomplish it could be to have a boolean state variable playing , that can be true or false depending on whether the video is playing. Then you can set the visibility of the overlay based on that state.