拖动进度条不播放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.vContainer{
width: 640px;
height: 352px;
margin: 30px auto;
overflow: hidden;
position: relative;
background-color: #dedede;
}
.caption{
position: absolute;
left: 0;
top: -50px;
width: 100%;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: #ccc;
background-color: #1f1f1f;
z-index: 1;
}
.control{
position: absolute;
left: 0;
bottom: -50px;
color: #ccc;
background-color: #1f1f1f;
width: 100%;
z-index: 1;
}
.control .top{
height: 11px;
padding: 1px 5px;
border-bottom: 1px solid #404040;
}
.control .top .progress{
height: 10px;
position: relative;
width: 85%;
float: left;
cursor: pointer;
border-radius: 5px;
background-color: #404040;
}
.control .top .progress .timeBar{
position: absolute;
display: block;
height: 100%;
left: 0;
top: 0;
background-color: #F9D43A;
z-index: 3;
border-radius: 5px;
}
.control .top .time{
width: 15%;
line-height: 12px;
text-align: center;
float: right;
font-size: 0px;
}
.control .top .time span{
font-size: 12px;
}
.control .bottom{
clear: both;
background-color: #1f1f1f;
}
.control .bottom .button{
width: 35px;
height: 35px;
padding: 0 5px;
cursor:pointer;
float: left;
}
.control .bottom .play{
background:url("image/play.png") no-repeat 7px 2px;
}
.control .bottom .pause{
background:url("image/pause.png") no-repeat 7px 2px;
}
.control .bottom .stop{
background:url("image/stop.png") no-repeat 7px 2px;
}
.control .bottom .sound{
background:url("image/sound.png") no-repeat 7px 2px;
}
.control .bottom .mute{
background:url("image/mute.png") no-repeat 7px 2px;
}
.control .bottom .text{
font-size: 16px;
line-height: 32px;
text-align: center;
font-weight: bold;
color: #777;
}
.control .bottom .selected{
color: #fff;
}
.control .bottom .mute,
.control .bottom .sound{
float: right;
}
.control .bottom .volumn{
position: relative;
cursor: pointer;
height: 10px;
width: 70px;
margin-top: 10px;
margin-right: 10px;
background-color: #707070;
float: right;
}
.control .bottom .volumn .volumnBar{
display: block;
height: 100%;
background-color: #eee;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.vContainer .loading{
height: 54px;
width: 55px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
background: url(image/loading.gif);
}
</style>
</head>
<body>
<div class="vContainer">
<div class="loading"></div>
<video id="myVideo">
<source src="imooc.mp4" type="video/mp4"/>
您的浏览器不支持video标签
</video>
<div class="caption">我自己的视频播放器</div>
<div class="control">
<div class="top">
<div class="progress">
<span class="timeBar"></span>
</div>
<div class="time">
<span class="currentTime">00:00</span>
<span>/</span>
<span class="duration">00:00</span>
</div>
</div>
<div class="bottom">
<div class="button play" id="playBtn"></div>
<div class="button stop" id="stopBtn"></div>
<div class="button text selected" id="speed1Btn">x1</div>
<div class="button text" id="speed3Btn">x3</div>
<div class="volumn">
<span class="volumnBar"></span>
</div>
<div class="button sound" id="soundBtn"></div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
var video=$('#myVideo');
video.on('loadedmetadata',function(){
$('.vContainer').hover(function(){
showTitleAndControl(true);
},function(){
showTitleAndControl(false);
});
$('.duration').text(timeFormat(video[0].duration));
$('#playBtn').on('click',playAndpause);
$('#stopBtn').on('click',stopVideo);
$('#speed1Btn').on('click',function(){
playSpeed(1);
});
$('#speed3Btn').on('click',function(){
playSpeed(3);
});
$('#soundBtn').on('click',soundAndmute);
enableProgressDrag();
enableVolumeDrag();
updateVolumn(null,0.7);
})
/*视频能播放了隐藏loading*/
video.on('canplay',function(){
$('.loading').fadeOut(100);
})
/*视频进度条*/
video.on('timeupdate',function(){
var currentTime=video[0].currentTime;
var duration=video[0].duration;
var percent=100*currentTime/duration;
$('.timeBar').css("width",percent+"%");
$('.currentTime').text(timeFormat(currentTime));
})
/*鼠标移入移出显示标题和控制区域*/
function showTitleAndControl(showTitle){
if (showTitle) {
$('.caption').stop().animate({'top':0},100);
$('.control').stop().animate({'bottom':0},100);
}else{
$('.caption').stop().animate({'top':-50},100);
$('.control').stop().animate({'bottom':-50},100);
}
}
/*获取时长的函数*/
function timeFormat(seconds){
var minite=Math.floor(seconds / 60);
if (minite<10) {
minite="0"+minite;
}
var second=Math.floor(seconds % 60);
if (second<10) {
second="0"+second;
}
return minite +':'+second;
};
/*播放和暂停函数*/
function playAndpause(){
if (video[0].paused || video[0].ended) {
video[0].play();
$('#playBtn').removeClass('play').addClass('pause');
}else{
video[0].pause();
$('#playBtn').removeClass('pause').addClass('play');
}
}
/*定义一个鼠标拖拽进度条的函数*/
function enableProgressDrag(){
var progressDrag=false;
$('.progress').on('mousedown',function(e){
progressDrag=true;
updateProgress(e.pageX);
});
$(document).on('mouseup',function(e){
if (progressDrag) {
progressDrag=false;
updateProgress(e.pageX);
}
});
$(document).on('mousemove',function(e){
if (progressDrag) {
updateProgress(e.pageX);
}
});
}
function updateProgress(x){
var progress=$('.progress');
var percent=100*(x-progress.offset().left)/progress.width();
if (percent>100) {
percent=100;
}
if (percent<0) {
percent=0;
}
$('.timeBar').css("width",percent+"%");
video[0].currentTime=video[0].duration*percent/100;
}
/*定义一个结束按钮的函数*/
function stopVideo(){
video[0].pause();
updateProgress($('.progress').offset().left);
$('#playBtn').removeClass('pause').addClass('play');
}
/*定义一个播放速率函数*/
function playSpeed(speed){
if (speed==1) {
$('#speed1Btn').addClass('selected');
$('#speed3Btn').removeClass('selected');
}else if(speed==3){
$('#speed3Btn').addClass('selected');
$('#speed1Btn').removeClass('selected');
}
video[0].playbackRate=speed;
}
/*定义一个调节音量函数*/
function enableVolumeDrag(){
var volumnDrag=false;
$('.volumn').on('mousedown',function(e){
volumnDrag=true;
updateVolumn(e.pageX);
});
$('.volumn').on('mouseup',function(e){
if (volumnDrag) {
volumnDrag=false;
updateVolumn(e.pageX);
}
});
$('.volumn').on('mousemove',function(e){
if (volumnDrag) {
volumnDrag=false;
updateVolumn(e.pageX);
}
})
}
function updateVolumn(x,vol){
var volumn=$('.volumn');
var percent;
if (vol) {
percent=vol*100;
}else{
percent=100*(x-volumn.offset().left)/volumn.width();
if (percent>100) {
percent=100;
}else if (percent<0) {
percent=0;
}
}
$('.volumnBar').css("width",percent+"%");
video[0].volume=percent/100;
}
/*定义一个点击静音函数*/
function soundAndmute(){
if (video[0].muted) {
video[0].muted=false;
$('#soundBtn').removeClass('mute').addClass('sound');
$('.volumnBar').css("width",video[0].volume*100+"%");
}else{
video[0].muted=true;
$('#soundBtn').removeClass('sound').addClass('mute');
$('.volumnBar').css("width",0);
}
}
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星