November 2017 update. Please note that due to new changes in Safari 11 this no longer works in this browser. I will update the message if I find a way.
Although hidden controls are part of the HTML5 video specification. There are two ways to do this through javascript, and the other through css.
In Javascript, you can add an event handler for the timeupdate event, which changes each time the playback position changes, in other words, the event always occurs during video playback.
Assuming the identifier for the video element is called a “player,” the javascript code would look like this:
JS:
//assign video element to variable vid var vid = document.getElementById("player"); function videoTimeUpdate(e) { //set controls settings to controls,this make controls show everytime this event is triggered vid.setAttribute("controls","controls"); } //add event listener to video for timeupdate event vid.addEventListener('timeupdate', videoTimeUpdate, false);
A working example above is given here: https://jsfiddle.net/l33tstealth/t082bjnf/6/
The second way to do this is through CSS, but this will only work for website-based browsers, therefore it is limited. You can make the control panel always show.
CSS for this would look like this:
CSS
video::-webkit-media-controls-panel { display: flex !important; opacity: 1 !important; }
Working sample (works only in web set-based browsers): https://jsfiddle.net/l33tstealth/t082bjnf/7/