Turn off volume control and mute button in HTML5 video

Question

We have some videos playing great in our HTML mobile app. However, our videos don't have sound, just subtitles, so we need to remove the volume slider and mute button but keep the timer bar.

Or is some javascript required to do this?

Answer 1

This has worked:

video::-webkit-media-controls-volume-slider {
display:none;
}

video::-webkit-media-controls-mute-button {
display:none;
}

Answer 2

Super easy:

Your html should be something like:

<video id="Video1">
  <source src="..." type="video/mp4">
  <source src="..." type="video/ogg">
  Your browser does not support HTML5 video.
</video>

Add then a customized button to play the video:

<button id="play" onclick="vidplay()">&gt;</button>

Finally a progress bar:

<progress id="progressbar" value="0" max="100"></progress>

Then in javascript add a button to play

var video = document.getElementById("Video1");

function vidplay() {

       var button = document.getElementById("play");
       if (video.paused) {
          video.play();
          button.textContent = "||";
       } else {
          video.pause();
          button.textContent = ">";
       }
    }

And a listener to update the progress bar:

video.addEventListener('timeupdate', updateProgressBar, false);


function updateProgressBar() { 
var progressBar = document.getElementById('progressbar'); 
var percentage = Math.floor((100 / mediaPlayer.duration) * mediaPlayer.currentTime);
 progressBar.value = percentage; progressBar.innerHTML = percentage + '% played'; 
}

So basically remove the "standard controls" and create your own ones.

If you wanted to achieve more complicated results, I would recommend you another option. This could be using a more configurable setting such as video.js .

Answer 3

This is the list of pseudo elements of video:

video::-webkit-media-controls-panel

video::-webkit-media-controls-play-button

video::-webkit-media-controls-volume-slider-container

video::-webkit-media-controls-volume-slider

video::-webkit-media-controls-mute-button

video::-webkit-media-controls-timeline

video::-webkit-media-controls-current-time-display

video::-webkit-full-page-media::-webkit-media-controls-panel

video::-webkit-media-controls-timeline-container

video::-webkit-media-controls-time-remaining-display

video::-webkit-media-controls-seek-back-button

video::-webkit-media-controls-seek-forward-button

video::-webkit-media-controls-fullscreen-button

video::-webkit-media-controls-rewind-button

video::-webkit-media-controls-return-to-realtime-button

video::-webkit-media-controls-toggle-closed-captions-button

In this referente there also pseudo-elements of audio, radio and several inputs.. Reference: Reference

Answer 4

Remove the controls attribute from the video element completely.

Try Here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_controls . Remove the "controls" attribute and the bar will disappear.