HTML5+CSS3+jQuery制作视频播放器完全指南

HTML5+CSS3+jQuery制作视频播放器完全指南_第1张图片

播放器最终效果预览图

1.下载MediaElement.js

首先下载MediaElement.js脚本文件,这是一个开源的HTML5音、视频插件,解压后你会得到3个文件—— "flashmediaelement.swf"、 "mediaelement-and-player.min.js"和 "silverlightmediaelement.xap" ,分别是使用Flash、 JavaScript和 SilverLight实现视频播放,并且新建一个"js"文件夹并把它们放进去(当然本例中并不需要 "flashmediaelement.swf" 和 "silverlightmediaelement.xap" 两个文件,可以删去。)。

2.HTML标记

首先需要链接(link)一个jQuery库,这里使用的是Google托管的jQuery库。然后我们在链接"mediaelement-and-player.min.js"文件和CSS文件。

 
  
  1. <head> 
  2.     <title>Video Playertitle> 
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">script> 
  4.     <script src="js/mediaelement-and-player.min.js">script> 
  5.     <link rel="stylesheet" href="css/style.css" media="screen"> 
  6. head> 

当然我们还需要添加一个Html5 video标记来创建一个视频播放器,再添加一些属性将它初始化。(注:poster是指视频的预览图)

 
  
  1. <video width="640" height="267" poster="media/cars.png"> 
  2.     <source src="media/cars.mp4" type="video/mp4"> 
  3. video> 

接下来我们再加入下面的代码来创建控制面板,需要添加的控制器或功能有:

  • alwaysShowControls – "true"则设置video控制面板永远显示,"false"则在鼠标移走后隐藏。
  • videoVolume – "horizontal"设置音量滑动控制器为水平
  • 其它功能:暂停播放、前进播放、声音和全屏
     
        
    1. <script type="text/javascript">//  
    2. $(document).ready(function() { 
    3.     $('video').mediaelementplayer({ 
    4.         alwaysShowControls: true, 
    5.         videoVolume: 'horizontal', 
    6.         features: ['playpause','progress','volume','fullscreen'] 
    7.     }); 
    8. }); 
    9. // ]]>script> 

更多设置请查阅MediaElement.js的设置文档。

3.播放器基本样式设计

先修改一下样式设置:

 
  
  1. .mejs-inner, 
  2. .mejs-inner div, 
  3. .mejs-inner a, 
  4. .mejs-inner span, 
  5. .mejs-inner button, 
  6. .mejs-inner img { 
  7.     margin0
  8.     padding0
  9.     bordernone
  10.     outlinenone

再给video Container添加样式,下面的代码全部都是用来控制布局的,没有对播放器样式做任何修改。

 
  
  1. .mejs-container { 
  2.     positionrelative
  3.     background#000000
  4.  
  5. .mejs-inner { 
  6.     positionrelative
  7.     width: inherit; 
  8.     height: inherit; 
  9.  
  10. .me-plugin { positionabsolute; } 
  11.  
  12. .mejs-container-fullscreen .mejs-mediaelement, 
  13. .mejs-container-fullscreen video, 
  14. .mejs-embed
  15. .mejs-embed body, 
  16. .mejs-mediaelement { 
  17.     width100%
  18.     height100%
  19.  
  20. .mejs-embed
  21. .mejs-embed body { 
  22.     margin0
  23.     padding0
  24.     overflowhidden
  25.  
  26. .mejs-container-fullscreen { 
  27.     positionfixed
  28.     left: 0
  29.     top: 0
  30.     right: 0
  31.     bottom: 0
  32.     overflowhidden
  33.     z-index1000
  34.  
  35. .mejs-background, 
  36. .mejs-mediaelement, 
  37. .mejs-poster, 
  38. .mejs-overlay { 
  39.     positionabsolute
  40.     top: 0
  41.     left: 0
  42.  
  43. .mejs-poster img { displayblock; } 

HTML5+CSS3+jQuery制作视频播放器完全指南_第2张图片

4.控制面板样式设置

让我们先从添加“播放按钮”开始:

 
  
  1. .mejs-overlay-play { cursorpointer; } 
  2.  
  3. .mejs-inner .mejs-overlay-button { 
  4.     positionabsolute
  5.     top: 50%
  6.     left: 50%
  7.     width50px
  8.     height50px
  9.     margin-25px 0 0 -25px
  10.     backgroundurl(../img/play.png) no-repeat

接下来再添加视频控制器布局:将它放在视频底部,高度为34px,再添加一个背景颜色,配合RGBA来设置透明度。最后给按钮添加基本样式和图元。

 
  
  1. .mejs-container .mejs-controls { 
  2.     positionabsolute
  3.     width100%
  4.     height34px
  5.     left: 0
  6.     bottom: 0
  7.     backgroundrgb(0,0,0); 
  8.     background: rgba(0,0,0, .7); 
  9.  
  10. .mejs-controls .mejs-button button { 
  11.     displayblock
  12.     cursorpointer
  13.     width16px
  14.     height16px
  15.     backgroundtransparent url(../img/controls.png); 

HTML5+CSS3+jQuery制作视频播放器完全指南_第3张图片

5.视频控制器

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

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

HTML5+CSS3+jQuery制作视频播放器完全指南_第4张图片

6.音量滑动控制器

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

 
  
  1. .mejs-controls div.mejs-horizontal-volume-slider { 
  2.     positionabsolute
  3.     cursorpointer
  4.     top: 15px
  5.     left: 65px
  6.  
  7. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { 
  8.     width60px
  9.     background#d6d6d6
  10.  
  11. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  12.     positionabsolute
  13.     width0
  14.     top: 0
  15.     left: 0
  16.  
  17. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total, 
  18. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { 
  19.     height4px
  20.  
  21.     -webkit-border-radius: 2px
  22.     -moz-border-radius: 2px
  23.     border-radius: 2px

HTML5+CSS3+jQuery制作视频播放器完全指南_第5张图片

7.进度条

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

 
  
  1. .mejs-controls div.mejs-time-rail { 
  2.     positionabsolute
  3.     width100%
  4.     left: 0
  5.     top: -10px
  6.  
  7. .mejs-controls .mejs-time-rail span { 
  8.     positionabsolute
  9.     displayblock
  10.     cursorpointer
  11.     width100%
  12.     height10px
  13.     top: 0
  14.     left: 0
  15.  
  16. .mejs-controls .mejs-time-rail .mejs-time-total { 
  17.     backgroundrgb(152,152,152); 
  18.     background: rgba(152,152,152, .5); 
  19.  
  20. .mejs-controls .mejs-time-rail .mejs-time-loaded { 
  21.     backgroundrgb(0,0,0); 
  22.     background: rgba(0,0,0, .3); 
  23.  
  24. .mejs-controls .mejs-time-rail .mejs-time-current { width0; } 

HTML5+CSS3+jQuery制作视频播放器完全指南_第6张图片

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

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

 
  
  1. .mejs-controls .mejs-time-rail .mejs-time-handle { 
  2.     positionabsolute
  3.     cursorpointer
  4.     width16px
  5.     height18px
  6.     top: -3px
  7.     backgroundurl(../img/handle.png); 
  8.  
  9. .mejs-controls .mejs-time-rail .mejs-time-float { 
  10.     positionabsolute
  11.     displaynone
  12.     width33px
  13.     height23px
  14.     top: -26px
  15.     margin-left-17px
  16.     backgroundurl(../img/tooltip.png); 
  17.  
  18. .mejs-controls .mejs-time-rail .mejs-time-float-current { 
  19.     positionabsolute
  20.     displayblock
  21.     left: 0
  22.     top: 4px
  23.  
  24.     font-familyHelveticaArialsans-serif
  25.     font-size10px
  26.     font-weightbold
  27.     color#666666
  28.     text-aligncenter
  29.  
  30. .mejs-controls .mejs-time-rail .mejs-time-float-corner { displaynone; } 

HTML5+CSS3+jQuery制作视频播放器完全指南_第7张图片

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%); 

HTML5+CSS3+jQuery制作视频播放器完全指南_第8张图片

  • CSDN本地下载
  • designmodo.com

你可能感兴趣的:(前端)