js通过按钮打开或关闭视频音量

2019-09-08 Umming js常用代码评论(0) 浏览(3099)

近期遇到一个项目，客户要求在视频上添加一个按钮，来控制视频的声音打开或者关闭，研究了一下，用volume属性即可达到该效果，下面是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<body>
<div style="position: relative;">
	<a href="javascript:;" class="close-v" style="position: absolute;top:20px;left: 20px;z-index: 9999;color: #fff">关闭声音</a>
	<a href="javascript:;" class="close-o" style="position: absolute;top:20px;left: 20px;z-index: 9999;color: #fff;display: none">打开声音</a>
	<video id="shipin" src="http://xh.sooqee.cn/video/1080.mp4"  autoplay="">
您的浏览器不支持 video 标签。
</video>
</div>
<script type="text/javascript">
	$(".close-v").click(function(){
		document.getElementById("shipin").volume =0;
		$(this).hide();
		$(".close-o").show();
	})
	$(".close-o").click(function(){
		document.getElementById("shipin").volume =1;
		$(this).hide();
		$(".close-v").show();
	})
</script>
</body>
</html>