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