body,html,div,video{margin:0;padding:0;}
.main{width:600px;height:340px;position:relative;}
video{width:600px;height:340px;}
.control{display:none;width:600px;height:22px;position:absolute;bottom:0px;background:rgba(255,255,255,0.4);font-size:16px;}
.control span{height:22px;cursor:hand;cursor:pointer;}
播放
■
快进
快退
加速
正常
减速
提高音量
降低音量
静音
全屏
var movie = $(‘#movie’)[0];
movie.volume = 0.5;
$(‘.main’).hover(function(){
$(‘.control’).fadeIn();
},function () {
$(‘.control’).fadeOut();
});
var conB = true;
$(‘.play’).click(function () {
if (conB) {
movie.play();
conB = false;
this.innerHTML = ‘||’;
}else {
movie.pause();
conB = true;
this.innerHTML = ‘播放’;
}
});
$(‘.stop’).click(function () {
movie.currentTime=0;
movie.pause();
});
$(‘.go’).click(function () {
movie.currentTime+=10;
});
$(‘.back’).click(function () {
movie.currentTime-=10;
});
$(‘.playadd’).click(function () {
if (movie.playbackRate<=1.9) {
movie.playbackRate+=0.1;
}else {
//不可大于两倍速
}
});
$(‘.playmin’).click(function () {
if (movie.playbackRate>=0.6) {
movie.playbackRate-=0.1;
}else {
//不可小于一半速度
}
});
$(‘.playnormal’).click(function () {
movie.playbackRate=1;
});
$(‘.addvoice’).click(function () {
if (movie.volume<1.2) {
movie.volume+=0.1
}else {
//不可高于120%音量
}
});
$(‘.minvoice’).click(function () {
if (movie.volume>0) {
movie.volume-=0.1
}else {
//不可低于0%音量
}
});
var volB = true;
$(‘.novoice’).click(function () {
if (volB) {
movie.muted = true;
volB = false;
}else {
movie.muted = false;
volB = true;
}
});
$(‘.fullscreen’).click(function () {
movie.webkitEnterFullscreen(); // webkit类型的浏览器
movie.mozRequestFullScreen(); // FireFox浏览器
});
效果截图：
4775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
