我的进度条为什么拖动不了

(function($){

var video=$('#myVideo');

//创建一个格式化时间的函数

var timeFormat=function(seconds){

var minute=Math.floor( seconds/60 );

if(minute<10){

minute="0"+minute;

}

var second=Math.floor( seconds%60 );

if(second<10){

second="0"+second;

}

return minute+":"+second;

}

//创建是否显示控制栏和标题栏函数

var captionAndControlShow=function(shouldshow){

if(shouldshow){

$('.caption').stop().animate({'top':0},500);

$('.control').stop().animate({'bottom':0},500);

}else{

$('.caption').stop().animate({'top':-50},500);

$('.control').stop().animate({'bottom':-50},500);

}

}

var playAndpause=function(){

if(video[0].paused||video.ended){

video[0].play();

$('#playBtn').removeClass('play').addClass('pause');

}else{

video[0].pause();

$('#playBtn').removeClass('pause').addClass('play');

}

}

var stopVideo=function(){

video[0].pause();

updateProgress($('.progress').offset().left);

$('#playBtn').removeClass('pause').addClass('play');

}

var playSpeed=function(speed){

if(speed==1){

$('#speed1Btn').addClass('selected');

$('#speed3Btn').removeClass('selected');

}

if(speed==3){

$('#speed1Btn').removeClass('selected');

$('#speed3Btn').addClass('selected');

}

video[0].playbackRate=speed;

}

var soundAndMute=function(){

if(video[0].muted){

video[0].muted=false;

$('#soundBtn').removeClass('mute').addClass('sound');

$('.volumeBar').css('width',video[0].volume*100+"%");

}else{

video[0].muted=true;

$('#soundBtn').removeClass('sound').addClass('mute');

$('.volumeBar').css('width',0);

}

}

//创建一个函数progressDrag

var enableProgressDrag=function(){

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);

}

})

}

//创建一个updateProgress函数

var updateProgress=function(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;

}

//创建一个函数enableSoundDrag

var enableSoundDrag=function(){

var soundDrag=false;

$('.volume').on('mousedown',function(e){

soundDrag=true;

updateSound(e.pageX);

video[0].muted=false;

$('#soundBtn').removeClass('mute').addClass('sound');

});

$('document').on('mouseup',function(e){

if(soundDrag){

soundDrag=false;

updateSound(e.pageX);

}

});

$('document').on('mousemove',function(e){

if(soundDrag){

updateSound(e.pageX);

}

})

}

//创建一个updateProgress函数

var updateSound=function(x,vol){

var volume=$('.volume');

var percent;

if(vol){

percent=vol*100;

}else{

var percent=100 * (x-volume.offset().left)/ volume.width();

if(percent>100){

percent=100;

}

if(percent<0){

percent=0;

}

}

$('.volumeBar').css('width',percent+'%');

video[0].volume=percent/100;

}

video.on('loadedmetadata',function(){

video.width($('.myControls').width());

video.height($('.myControls').height());

$('#currentTime').html(timeFormat(0));

//获取视频的总时长，并duration的内容更换为总时长。

$('#duration').html( timeFormat(video[0].duration) )

;

//鼠标移入控制栏显示，鼠标移出，控制栏隐藏

captionAndControlShow(false);

$('#myControls').hover(function(){

captionAndControlShow(true);

},function(){

captionAndControlShow(false);

});

$('#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();

enableSoundDrag();

updateSound(null,0.5);

});

video.on('ended',function(){

updateProgress($('.progress').offset().left);

$('#playBtn').removeClass('pause').addClass('play');

})

//播放进度条和播放时间的更新；

var loadingTimer=null;

video.on('timeupdate',function(){

var currentTime=video[0].currentTime;

var duration=video[0].duration;

var percent=100*currentTime / duration;

$('.timeBar').css('width',percent+"%");

$('#currentTime').html(timeFormat(currentTime));

$('.loading').fadeOut(100);

clearTimeout(loadingTimer);

loadingTimer=setTimeout(function(){

if(!video[0].paused && !video[0].ended){

$('.loading').fadeIn(100);

}

},500)

})

//可播放时让loading消失

video.on('canplay',function(){

$('.loading').fadeOut(100);

})

})(jQuery);

*{

padding:0;

margin:0;

}

.myControls{

width:640px;

height:360px;

margin:30px auto;

background-color:#dedede;

position:relative;

overflow: hidden;

}

.caption{

position:absolute;

left:0px;

top:0px;

width:100%;

padding:10px;

background: #1f1f1f;

color:#ccc;

font-size:20px;

font-weight:bold;

}

.control{

position:absolute;

left:0px;

bottom:0px;

width:100%;

background-color:#1f1f1f;

color:#ccc;

}

.control .top{

height:11px;

padding:1px 5px;

border-bottom:1px solid #404040;

background-color:#1f1f1f;

}

.control .top .progress{

width:85%;

height:10px;

position:relative;

background:#404040;

border-radius:5px;

float:left;

cursor:pointer;

}

.control .top .progress .timeBar{

display:block;

height:100%;

width:0;

position:absolute;

left:0px;

top:0px;

background-color:#f9d43a;

border-radius:5px;

}

.control .top .time{

float:right;

display:block;

text-align:center;

height:100%;

width:15%;

font-size:0px;

line-height:12px;

}

.control .top .time span{

font-size:12px;

}

.control .bottom{

clear:both;

background:#1f1f1f;

}

.control .bottom .button{

width:32px;

height:32px;

float:left;

padding:0 5px;

cursor:pointer;

}

.control .bottom .button.play{

background:url(play.png) no-repeat 7px 3px;

}

.control .bottom .button.pause{

background:url(pause.png) no-repeat 7px 3px;

}

.control .bottom .button.stop{

background:url(stop.png) no-repeat 7px 3px;

}

.control .bottom .button.sound{

background:url(sound.png) no-repeat 7px 3px;

}

.control .bottom .button.mute{

background:url(mute.png) no-repeat 7px 3px;

}

.control .bottom .text{

color:#777;

font-size:16px;

font-weight:bold;

line-height:30px;

}

.control .bottom .selected{

color:#fff;

}

.control .bottom .volume{

float:right;

width:70px;

height:10px;

margin-top:12px;

position:relative;

background:#404040;

cursor:pointer;

margin-right:10px;

}

.control .bottom .volume .volumeBar{

position:absolute;

left:0px;

top:opx;

display:block;

width:0;

height:100%;

background:#eee;

}

.control .bottom .sound,

.control .bottom .mute{

float:right;

}

.loading{

width:54px;

height:53px;

position:absolute;

left:50%;

top:50%;

margin-top:-27px;

margin-left:-27px;

background:url(loading.gif) no-repeat;

}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>我自定义的视频播放器</title>

<link rel="stylesheet" href="control-video.css" type="text/css">

<script src="jquery-3.3.1.min.js" type="text/javascript"></script>

</head>

<body>

<div class="myControls" id="myControls">

<video id="myVideo">

<source src="imooc.ogv" type="video/ogv"></source>

<source src="imooc.webm" type="video/webm"></source>

<source src="imooc.mp4" type="video/m4v"></source>

您的浏览器不支持video标签

</video>

<div class="caption">我自己的视频播放器</div>

<div class="control" id="control">

<div class="top">

<div class="progress">

<span class="timeBar"></span>

</div>

<div class="time">

<span id="currentTime">00:00</span>

<span>/</span>

<span id="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="volume">

<!--表示音量大小-->

<span class="volumeBar" id="volumeBar"></span>

</div>

<div class="button sound" id="soundBtn"></div>

</div>

</div>

<!--视频播发卡住时需要显示的加载的提示-->

<div class="loading"></div>

</div>

<script src="control-video.js" type="text/javascript"></script>

</body>

</html>