这个有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>