I'm building a video blog and i want to remove the timer or timeupdate that appears on the video along with other controls. I have searched but only got how to disable control but not the timer specific.
Asked
Active
Viewed 404 times
-1
-
1That depends entirely on the technology used to play the video. – Feb 12 '19 at 14:45
-
What have you tried? How are you playing the videos? – James Coyle Feb 12 '19 at 14:56
1 Answers
1
Assuming you're talking about a <video> object:
Chrome supports a controlsList attribute on the video tag, which allows you to hide some of the normal controls -- nodownload, nofullscreen, and noremoteplayback -- the timer is not among them, however, and this an experimental and not widely supported feature.
There are also some vendor-prefixed CSS rules you could use, including ::-webkit-media-controls-current-time-display -- again, though, this is browser-specific.
The only cross-browser way to handle this would be to hide the default controls completely (by omitting the controls attribute from the video tag, or setting .controls = false on the video element in JS) and implement your own set of custom controls which will handle interaction with the video via the javascript Media API, for example
video = document.getElementById('video');
video.controls = false; // hide default controls
document.getElementById('customplaypausebutton').addEventListener('click', function(e) {
if (video.paused || video.ended) video.play();
else video.pause();
});
// etc for all other controls
This can end up being a substantial amount of work, but if it's worth it for you MDN has a very detailed tutorial on how to do it.
Daniel Beck
- 20,653
- 5
- 38
- 53