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
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()>></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.
