html5 video 自定义控制条，缓冲进度怎么获取

你看下这个
这是html代码

这是css代码
body{
background: #a8b1b6;
color: #2fa0ec;
font-weight: 500;
font-size: 1.05em;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #d8dedc;outline: none;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.demo{width: 100%;padding: 2em 0;}

.progress{
height: 30px;
line-height: 35px;
background: #809495;
box-shadow: none;
padding: 6px;
margin-top:20px;
overflow: visible;
border-radius:10px;
}
.progress:after{
content: "";
display: block;
border-top: 4px dashed #fff;
margin-top:8px;
}
.progressbar-title{
color:#d8dedc;
font-size:15px;
margin:5px 0;
font-weight: bold;
}
.progress .progress-bar{
position: relative;
border-radius: 10px 0 0 10px;
animation: animate-positive 2s;
}
.progress .progress-bar span{
position: absolute;
top: -50px;
right: -40px;
color: #fff;
display: block;
font-size: 17px;
font-weight: bold;
padding: 5px 7px;
background: #333;
border-radius: 0 0 5px 5px;
}
.progress .progress-bar span:before{
content: "";
position: absolute;
bottom: -14px;
left: 18px;
border: 7px solid transparent;
border-top: 7px solid #333;
}
.progress .progress-bar span:after{
content: "\f072";
font-family: fontawesome;
font-size: 48px;
color: #333;
position: absolute;
top: 51px;
right: 6px;
transform: rotateZ(48deg);
}
@-webkit-keyframes animate-positive {
0% { width: 0%;}
}
@keyframes animate-positive {
0% { width:0%; }
}

video 元素有一个 buffered 属性，video.buffered 得到一个 TimeRanges 对象，包含一个或多个 TimeRange（时间段），这就是当前 video 元素已缓存的部分，通过 TimeRanges.length 可以得到时间段的数量，通过 TimeRanges.start(index) 或 TimeRanges.end(index) 可以获取第 index（从0开始）个时间段的开始时间或结束时间，遍历 TimeRanges 获取当前播放时间（video.currentTime）所在的时间段的索引i，TimeRanges.end(i) / video.duration 即可作为缓冲进度百分比。