注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

记录创意的火花

天天学习,好好向上

 
 
 

日志

 
 

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

2015-01-11 18:38:18|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器。

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 Player</title> 
  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">// <![CDATA[ 
    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; } 

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

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; } 

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

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; } 

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; } 

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

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

Demo下载地址:

原文链接:designmodo.com

  评论这张
 
阅读(543)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017