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