video的静音，暂停播放

这个有bug就是静音的时候，调整音量大小的条还是会有声音，而且静音键没有与音量条结合
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>手机视频</title>	
</head>
<body>
<div data-role="page" >
	<div data="header">
		<video src="img/钟汉良 - 何以爱情.mp4" width="100%" height="100%" controls="controls"   id="videoSource"  >
您的浏览器不支持 video 标签。
</video>
	</div>
<div data-role="content">
	<select data-role="slider" onchange="jingyin()" id="slider">
	<option value="false">静音</option>
		<option value="true"> </option>
</select>
<br />
声音：<input  min="0" max="100" value="10" type="range" id="run" onchange="progress()"/>
<br />
<a href="#" data-role="button" data-inline="true" style="margin-left: 40px;"  id="start">开始</a>
<a href="#" data-role="button" data-inline="true" style="margin-left: 20px;"  id="opause">暂停</a>
<a href="#"  data-role="button"  data-inline="true" style="margin-left: 20px;"  id="end">结束</a>
</div>
<script type="text/javascript">
	
	function jingyin(){
		//console.log($("#slider")[0].selectedIndex);
		var index=$("#slider")[0].selectedIndex;
		var a=$("#slider option:eq("+index+")").val();
		if(a=="true"){
			$("#videoSource").prop("muted","muted");
		}else{
			$("#videoSource").removeProp("muted");
		}
	}
		window.onload=function(){
			var oStart = document.getElementById('start');
			var oEnd = document.getElementById('end');			
			var oVideo = document.getElementById('videoSource');
			var opause=document.getElementById('opause');
			// 开始函数
			oStart.onclick=function(){
				oVideo.play();
			}
			opause.onclick=function(){
				oVideo.pause();
			}
			// 停止函数
			oEnd.onclick=function(){
				oVideo.pause();
				oVideo.currentTime=0;
			}
			
		}
	function progress(){
		var run=document.getElementById('run');
		var oVideo = document.getElementById('videoSource');
        oVideo.volume=run.value/100;
        oVideo.muted=false;
    }

	</script>

</body>
video的静音，暂停播放

猜你喜欢
