如何使用CSS&HTML实现类似音量控制的拖动条_随笔

提供两种处理方式：

1.使用jplayer，需要额外引入几个脚本文件和样式文件即可搞定，可以自定义样式，具体参考相关文档；

2.使用audio标签实现，将其隐藏(透明处理)，拖曳 *** 作实际是 *** 作的audio标签，但是事件回调控制显示，这种方式可以很少的代码来控制；

如果仅仅是一个点击播放，暂停之类的简单功能，推荐使用方式2.如果 *** 作复杂，还要设计播放列表啥的，推荐方式1.

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

您的浏览器不支持 audio 与元素。

</audio>

<p>点击按钮获取或者设置播放的音频音量。</p>

<button onclick="setHalfVolume()" type="button">设置音量为 0.2</button>

<button onclick="setFullVolume()" type="button">设置音量为 1.0</button>

var x = document.getElementById("myAudio")

function getVolume(){

alert(x.volume)

}

function setHalfVolume(){

x.volume = 0.2

}

function setFullVolume(){

x.volume = 1.0

}

</script>

</body>

</html>

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签中，输入js代码：。

if (navigator.userAgent.match(/mobile/i)) {

$('video').hide()

}

3、浏览器运行index.html页面，此时在移动端中成功隐藏了video标签的控件。

欢迎分享，转载请注明来源：内存溢出

如何使用CSS&HTML实现类似音量控制的拖动条