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

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

1 个答案: