html - 如何在 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;                        
        }
    }