直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条

现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。

html代码：

HTML5-Video-Player

.videoPlayer{

border: 1px solid #000;

width: 600px;

}

#video{

margin-top: 0px;

}

#videoControls{

width: 600px;

margin-top: 0px;

}

.show{

opacity: 1;

}

.hide{

opacity: 0;

}

#progressWrap{

background-color: black;

height: 25px;

cursor: pointer;

}

#playProgress{

background-color: red;

width: 0px;

height: 25px;

border-right: 2px solid blue;

}

#showProgress{

background-color: ;

font-weight: 600;

font-size: 20px;

line-height: 25px;

}

HTML5_Video_Player

width="600" height="360"

preload controls

>

0

播放

全屏

js代码：

// 为了不随意的创建全局变量，我们将我们的代码放在一个自己调用自己的匿名函数中，这是一个好的编程习惯

(function(window, document){

// 获取要操作的元素

var video = document.getElementById("video");

var videoControls = document.getElementById("videoControls");

var videoContainer = document.ge