思洋互动网站建设学前班

5.视频控制器

这一步我们要做的只是将控制器居右放置。所以首先我们将所有的按钮放到控制面板上，之后再对它们的宽度、位置和背景图片做详细的调整。
广州网站建设,网站建设,广州网页设计,广州网站设计

1. .mejs-controls div.mejs-playpause-button {   
2.     position: absolute;   
3.     top: 12px;   
4.     left: 15px;   
5. }    
6.     
7. .mejs-controls .mejs-play button,   
8. .mejs-controls .mejs-pause button {   
9.     width: 12px;   
10.     height: 12px;   
11.     background-position: 0 0;   
12. }    
13.     
14. .mejs-controls .mejs-pause button { background-position: 0 -12px; }    
15.     
16. .mejs-controls div.mejs-volume-button {   
17.     position: absolute;   
18.     top: 12px;   
19.     left: 45px;   
20. }    
21.     
22. .mejs-controls .mejs-mute button,   
23. .mejs-controls .mejs-unmute button {   
24.     width: 14px;   
25.     height: 12px;   
26.     background-position: -12px 0;   
27. }    
28.     
29. .mejs-controls .mejs-unmute button { background-position: -12px -12px; }    
30.     
31. .mejs-controls div.mejs-fullscreen-button {   
32.     position: absolute;   
33.     top: 7px;   
34.     right: 7px;   
35. }    
36.     
37. .mejs-controls .mejs-fullscreen-button button,   
38. .mejs-controls .mejs-unfullscreen button {   
39.     width: 27px;   
40.     height: 22px;   
41.     background-position: -26px 0;   
42. }    
43.     
44. .mejs-controls .mejs-unfullscreen button { background-position: -26px -22px; } 

6.音量滑动控制器

音量滑动控制器的设置也一样，设置好位置和大小，再添加一个圆角效果就可以了。
广州网站建设,网站建设,广州网页设计,广州网站设计

1. .mejs-controls div.mejs-horizontal-volume-slider {   
2.     position: absolute;   
3.     cursor: pointer;   
4.     top: 15px;   
5.     left: 65px;   
6. }    
7.     
8. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {   
9.     width: 60px;   
10.     background: #d6d6d6;   
11. }    
12.     
13. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {   
14.     position: absolute;   
15.     width: 0;   
16.     top: 0;   
17.     left: 0;   
18. }    
19.     
20. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,   
21. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {   
22.     height: 4px;    
23.     
24.     -webkit-border-radius: 2px;   
25.     -moz-border-radius: 2px;   
26.     border-radius: 2px;   
27. }