CODEWITHSUNDEEP
htmlvideo
james joel
james joel

Reputation: 45

how to add only volume controls on HTML5 video tag

I want to use HTML5 video tag, but in this case i want only volume controls... please help me

<video controls id="myMovie" width="600" height="600" loop preload="auto" >
<source src="any file.mp4" type='video/mp4' />

<source src="any file.mp4" type='video/mp4' />         
       Your browser does not support the video tag.
</video>

Upvotes: 2

Views: 4579

Answers (1)

K K
K K

Reputation: 18109

I am not sure whether you can selectively hide the controls but there is way to do it.

You can first hide all the controls by removing controls attribute from the video element.

Demo here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

Then, you can use your own buttons to increase or decrease the volume using javascript. You can get the sample code here:

https://msdn.microsoft.com/en-us/library/ie/hh924823%28v=vs.85%29.aspx

JS:

// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
    setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
    setVol(.1); // up by 10%
}, false);


// change volume based on incoming value 
    function setVol(value) {
        var vol = video.volume;
        vol += value;
        //  test for range 0 - 1 to avoid exceptions
        if (vol >= 0 && vol <= 1) {
            // if valid value, use it
            video.volume = vol;
        } else {
            // otherwise substitute a 0 or 1
            video.volume = (vol < 0) ? 0 : 1;                        
        }
    }

Upvotes: 2

Related Questions