.video-box {
    overflow: hidden;
    background: #000;
    width: 750px;
    display: block;
    margin: 0 auto;
    -webkit-transition-duration: 300ms;
    -moz-transition-duration: 300ms;
    -ms-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
    z-index: 10;
}
.video-box-body {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 1%;
}
.video-body {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15;
}
/*控制条样式*/
.video-control {
    position: relative;
    border-radius: 8px;
    width: 100%;
    height: 60px;
    line-height: 50px;
    background: rgba(0, 0, 0, .5);
    z-index: 99999999999;
    margin-top: -65px;
    margin-left: auto;
    margin-right: auto;

}
.control-leftview {
    margin-right: -110px;
    position: relative;
    z-index: 5;
}
.control-btn {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: rgba(256, 256, 256, .5);
    cursor: pointer;
}
.control-leftview .control-btn {
    margin-right: 10px;
}
.progress-box {
    width: 100%;
    height: 50px;
    padding: 0 110px 0 120px;
}
.progress-box-body {
    width: 100%;
    height: 100%;
}
.current-time, .duration-time {
    width: 60px;
    text-align: center;
    color: #fff;
}
.current-time {
    margin-right: -60px;
    position: relative;
    z-index: 5;
}
.duration-time {
    margin-left: -60px;
    position: relative;
    z-index: 5;
}
.durationbar-box {
    width: 100%;
    padding: 0 70px;
}
.durationbar {
    width: 100%;
    height: 10px;
    margin-top: 20px;
    background: #26BEF5;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    position: relative;
}
.bufferbar, .currentbar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: rgba(0, 0, 0, .5);
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    z-index: 5;
    cursor: pointer;
}
.currentbar {
    background: #fff;
    z-index: 10;
}
.drawbar {
    position: absolute;
    background: #fff;
    width: 20px;
    height: 20px;
    left: 0;
    top: -5px;
    z-index: 10;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
}
.control-rightview {
    margin-left: -110px;
    position: relative;
    z-index: 5;
}
.control-rightview .control-btn {
    margin-left: 10px;
}
.control-leftview .control-btn:last-child, .control-rightview .control-btn:first-child {
    margin: 0;
}
.control-btn.loadbtn {
    background-color: #f53e26;
    background-size: 100%;
}
.control-btn.playbtn {
    background-color: #26f55a;
    background-size: 100%;
}
.control-btn.playbtn.pausebtn {
    background-color: #7526f5;
    background-size: 100%;
}
.control-btn.mutedbtn {
    background-color: #f5266b;
    background-size: 60%;
}
.control-btn.fullscreenbar {
    background-color: #2926f5;
    background-size: 100%;
}