思洋互动网站建设学前班

7.进度条

进度条的设置也同样简单，将它紧贴在控制面板上方就可以了，之后就是设置不同状态（all和loaded状态）的背景颜色。现在将它初始化为零就可以在影片播放时自动改变了。（但是你看不出来。）
广州网站建设,网站建设,广州网页设计,广州网站设计

1. .mejs-controls div.mejs-time-rail {   
2.     position: absolute;   
3.     width: 100%;   
4.     left: 0;   
5.     top: -10px;   
6. }    
7.     
8. .mejs-controls .mejs-time-rail span {   
9.     position: absolute;   
10.     display: block;   
11.     cursor: pointer;   
12.     width: 100%;   
13.     height: 10px;   
14.     top: 0;   
15.     left: 0;   
16. }    
17.     
18. .mejs-controls .mejs-time-rail .mejs-time-total {   
19.     background: rgb(152,152,152);   
20.     background: rgba(152,152,152, .5);   
21. }    
22.     
23. .mejs-controls .mejs-time-rail .mejs-time-loaded {   
24.     background: rgb(0,0,0);   
25.     background: rgba(0,0,0, .3);   
26. }    
27.     
28. .mejs-controls .mejs-time-rail .mejs-time-current { width: 0; } 

8.进度条控制器和时间提示框

这一步就该给进度条添加一个进度条控制器和一个时间提示框，同样我们还是调整位置，设置宽度、高度和背景图片，再添加一些排版样式。
广州网站建设,网站建设,广州网页设计,广州网站设计

1. .mejs-controls .mejs-time-rail .mejs-time-handle {   
2.     position: absolute;   
3.     cursor: pointer;   
4.     width: 16px;   
5.     height: 18px;   
6.     top: -3px;   
7.     background: url(../img/handle.png);   
8. }    
9.     
10. .mejs-controls .mejs-time-rail .mejs-time-float {   
11.     position: absolute;   
12.     display: none;   
13.     width: 33px;   
14.     height: 23px;   
15.     top: -26px;   
16.     margin-left: -17px;   
17.     background: url(../img/tooltip.png);   
18. }    
19.     
20. .mejs-controls .mejs-time-rail .mejs-time-float-current {   
21.     position: absolute;   
22.     display: block;   
23.     left: 0;   
24.     top: 4px;    
25.     
26.     font-family: Helvetica, Arial, sans-serif;   
27.     font-size: 10px;   
28.     font-weight: bold;   
29.     color: #666666;   
30.     text-align: center;   
31. }    
32.     
33. .mejs-controls .mejs-time-rail .mejs-time-float-corner { display: none; } 

9.绿色的已播放进度条

本教程的最后一步就是在进度条和音量滑动条上添加绿色的已播放进度条和音量显示，这个也很简单。

1. .mejs-controls .mejs-time-rail .mejs-time-current,   
2. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {   
3.     background: #82d344;   
4.     background: -webkit-linear-gradient(top, #82d344 0%, #51af34 100%);   
5.     background: -moz-linear-gradient(top, #82d344 0%, #51af34 100%);   
6.     background: -o-linear-gradient(top, #82d344 0%, #51af34 100%);   
7.     background: -ms-linear-gradient(top, #82d344 0%, #51af34 100%);   
8.     background: linear-gradient(top, #82d344 0%, #51af34 100%);   
9. } 

总结：虽然很简单，但这确实是一个很不错的开源（CC许可证3.0）视频播放器！经过设置还可以支持多种视频格式，所以它不仅仅可以被用来做网络视频播放器，如果你还愿意给它增加一些功能，甚至可以把它可以做成跨平台的本地视频播放器。
广州网站建设,网站建设,广州网页设计,广州网站设计