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.

Can this be done or toggled with HTML or CSS? Or is some javascript required to do this?

At the moment the setting within our html tag is just: controls="controls"

Answer 1

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 2

This has worked:

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

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

Answer 3

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.