<!DOCTYPE html>
<html>
<meta charset=gb2312" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<div>
<div>
<video id="video" src="2.mp4" width="600">当前浏览器不支持video元素</video>
</div>
<div id="progressTime" style="display:none">
<div style="float:left">
<progress id="progress" max="100" style="width:450px">
</progress>
</div>
<div id="showTime" style="float:left;margin-left:15px"></div>
<div style="clear:both"></div>
</div>
</div>
<input type="button" id ="btnPlay" onclick="playOrPause()" value="Play"/>
<input type="button" id="btnSpeedUp" onclick="speedUp()" value="Speed Up" />
<input type="button" id="btnSpeedUpDown" onclick="speedDown()" value="Speed Down" />
<input type="button" id="btnVolumeUp"onclick="volumeUp()" value="Volume Up" />
<input type="button" id="btnVolumeDown" onclick="volumeDown()" value="Volume Down" />
<input type="button" id="bthMute" onclick="mute()" value="Mute" />
</div>
</div>
<div>
<table width='100%'>
<tr>
<td width='20%'>Setspeed</td>
<td width='40%'>
<select id="sspeed">
<option value="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="2.0">2.0</option>
<option value="0.75">0.75</option>
<option value="0.5">0.5</option>
</select>
</td>
<td width='20%'> </td>
</tr>
</table>
<input type="button" id ="setSpeed" onclick="setspeed()" value="set"/>
</div>
<script>
var speed=1; //播放速度
var volume=1; //播放音量
var video=document.getElementById("video");
var playBtn=document.getElementById("btnPlay");
var btnSpeedUp=document.getElementById("btnSpeedUp");
var btnSpeedUpDown=document.getElementById("btnSpeedUpDown");
var btnVolumeUp=document.getElementById("btnVolumeUp");
var btnVolumeDown=document.getElementById("btnVolumeDown");
var showTime=document.getElementById("showTime");
var bthMute=document.getElementById("bthMute")
video.addEventListener('timeupdate',updateProgress,false); //为播放器添加时间改变监听事件
var progress=document.getElementById("progress");
progress.onclick=progressOnClick; //为progress控件添加点击事件
//播放或暂停
function playOrPause()
{
var progressTime=document.getElementById("progressTime");
progressTime.style.display=""; //显示播放进度条和时间
if(video.paused) //如果当前播放状态为暂停，点击后开始播放
{
playBtn.value="Pause";
video.play();
video.playbackRate=speed;
video.volume=volume;
//启用控制工具条其他按钮
btnSpeedUp.disabled="";
btnSpeedUpDown.disabled="";
//btnVolumeUp.disabled="";
//btnVolumeDown.disabled="";
}
else //如果当前播放状态为播放，点击后暂停播放
{
playBtn.value="Play";
video.pause();
//禁用控制条其他按钮
btnSpeedUp.disabled="disabled";
btnSpeedUpDown.disabled="disabled";
//btnVolumeUp.disabled="disabled";
//btnVolumeDown.disabled="disabled";
}
}
//提高播放速度
function speedUp()
{
video.playbackRate+=0.25;
speed=video.playbackRate;
}
//降低播放速度
function speedDown()
{
video.playbackRate-=0.25;
if(video.playbackRate<0)
{
video.playbackRate=0;
}
speed=video.playbackRate;
}
//增大音量
function volumeUp()
{
video.volume+=0.1;
btnVolumeDown.disabled="";
if(video.volume>0)
{
video.muted=false;
bthMute.value="Mute"
}
volume=video.volume;
}
//降低音量
function volumeDown()
{
if(video.volume>0)
{
video.volume-=0.1;
if(video.volume==0)
{
video.muted=true;
btnVolumeDown.disabled="disabled";
bthMute.value="Muted";
}
}
else
{
btnVolumeDown.disabled="disabled";
bthSMute.value="Muted";
}
volume=video.volume;
}
//静音
function mute()
{
if(video.volume>0)
{
bthMute.value="Muted";
video.volume=0;
btnVolumeDown.disabled="disabled";
video.muted=true;
}
else if(video.volume==0)
{
bthMute.value="Mute";
video.volume=1;
btnVolumeDown.disabled="";
video.muted=false;
}
volume=video.volume;
}
//播放进度条点击事件，点击后从点击位置开始播放
function progressOnClick(event)
{
var progress=document.getElementById("progress");
if(event.offsetX) //获取鼠标当前点击位置与当前位置相比存在偏移量
{
video.currentTime=video.duration*(event.offsetX/progress.clientWidth); //设定播放器新的播放位置
}
else
{
video.currentTime=video.duration*(event.clientX/progress.clientWidth);
}
}
//更新进度条状态
function updateProgress()
{
var currentPercent=Math.round(Math.floor(video.currentTime)/Math.floor(video.duration)*100,0);//计算当前播放时长与视频总时长之比
var progress=document.getElementById("progress");
progress.value=currentPercent;
showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/"+calculateTime(Math.floor(video.duration));//显示播放时间
}
//将当前传入的时间转换为hh:MM:ss的格式
function calculateTime(time)
{
var h;
var m;
var s;
h=String(parseInt(time/3600,10));
if(h.length==1)
{
h='0'+h;
}
m=String(parseInt((time%3600)/60,10));
if(m.length==1)
{
m='0'+m;
}
s=String(parseInt(time%60),10)
if(s.length==1)
{
s='0'+s;
}
return h+":"+m+":"+s;
}
//滚动调节音量
function getValueofvolume()
{
var valuev = document.getElementById("rangeInput").value;
var resultv = document.getElementById("resultv");
resultv.innerText = valuev/100;
video.volume = resultv.innerText;
}
//选项调音量
function setspeed()
{
video.playbackRate = Setspeed.value;
speed=video.playbackRate;
}
</script>
<form>
<fieldset>
<legend>
请选择您的音量
</legend>
<input id="rangeInput" type="range" min="0" max="100" onChange="getValueofvolume()">
<span id="resultv"></span>
</fieldset>
</form>
</script>
</html>
