<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作可以变速播放的视屏</title>
<style>
#main{
width: 400px;
height: 375px;
}
#videoContainer{
width: 400px;
}
#videoController{
width: 400px;
height:30px;
}
#videoController img{
width: 30px;
float: left;
}
#videoController img:hover{
cursor: pointer;
}
#imgcontainer{
width: 65px;
height: 32px;
float: left;
}
#videoTips{
width: 330px;
height: 32px;
float: left;
}
#playTime{
float: left;
margin-left: 60px;
margin-top: 5px;
}
#speed{
float: left;
margin-left: 110px;
margin-top: 5px;
}
#slider{
margin-top: 8px;
border: 1px solid green;
width: 400px;
height: 30px;
background-color: #aab;
}
</style>
<link type="text/css" href="css/jquery-ui-1.7.3.custom.css">
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/ui.core.js"></script>
<script src="js/ui.slider.js"></script>
<script>
window.addEventListener("load",function(){
var myvideo=document.getElementByIdx_x("myvideo");
//为我们的播放按钮添加事件
var play=document.getElementByIdx_x("play")
play.addEventListener("click",function(){
//首先判断当前是播放还是暂停，如果当前是播放，那么点击暂停，出现暂停的图片，如果当前暂停，则出现播放的图片
if(myvideo.paused==true){
//表示此时是暂停
myvideo.play();
play.src="images/pause.jpg";
play.title="暂停";
}
else{
//表示此时是播放
myvideo.pause();
play.src="images/play.jpg"
play.title="播放";
}
},true);
//为我们的重新播放添加事件
var replay=document.getElementByIdx_x("replay");
replay.addEventListener("click",function(){
myvideo.currentTime=0;
myvideo.play();
play.src="images/pause.jpg";
play.title="暂停";
},true);
window.addEventListener("timeupdate",function(){
//写入当前的播放时间,只显示小数点后一位
document.getElementByIdx_x("playTime").innerHTML="播放时间:"+Math.round(myvideo.currentTime*10)/10;
},true);
//下边设置我们的速度滑块
$("#slider").slider({
max:4, //滑块的最大值
min:0, //滑块的最小值
step:0.05, //滑块之间的距离
value:1,
change:function(evt,ui){
myvideo.playbackRate=ui.value;//根据滑块的值来设置播放速度
myvideo.defaultPlaybackRate=ui.value;
document.getElementByIdx_x("speed").innerHTML=ui.value+"速";
}
});
},true);
</script>
</head>
<body>
<div id="main">
<div id="videoContainer">
<video id="myvideo" width="400">
<source src="video/first.ogv">
<source src="video/first.mp4">
</video>
</div>
<div id="videoController">
<div id="imgcontainer">
<img src="images/replay.jpg" title="重新播放" id="replay">
<img src="images/play.jpg" title="播放" id="play">
</div>
<div id="videoTips">
<div id="playTime">播放时间:0.0</div>
<div id="speed">1倍速</div>
</div>
</div>
<div id="slider">
</div>
</div>
</body>
</html>
4588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
