如何在HTML5视频标签上仅添加音量控件

Question

我想使用HTML5视频标签，但在这种情况下，我只需要音量控制...请帮助我

<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>

Answer 1

我不确定是否可以有选择地隐藏控件，但是有办法做到。

您可以先通过从视频元素中删除controls属性来隐藏所有控件。

此处的演示： http : //www.w3schools.com/html/tryit.asp? filename= tryhtml5_video_js_prop

然后，您可以使用自己的按钮使用javascript增大或减小音量。 您可以在此处获取示例代码：

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;                        
        }
    }