HTML 5、CSS3、JS开发播放器完全指南

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

我们拥有十年网页设计和网站建设经验，从网站策划到网站制作，我们的网页设计师为您提供的解决方案。为企业提供网站设计制作、成都网站建设、微信开发、微信小程序开发、成都做手机网站、H5网站设计、等业务。无论您有什么样的网站设计或者设计方案要求，我们都将富于创造性的提供专业设计服务并满足您的需求。

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.    
    2.   
  
  
  
  2.     Video Player   
    3.   
  
  
  
  3.        
    4.   
  
  
  
  4.        
    5.   
  
  
  
  5.        
    6.   
  
  
  
  6.  
    7.

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

 
 
 
 
      
  
  
  
  1.    
    2.   
  
  
  
  2.        
    3.   
  
  
  
  3.  
    4.

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

alwaysShowControls – “true”则设置video控制面板永远显示，”false”则在鼠标移走后隐藏。

videoVolume – “horizontal”设置音量滑动控制器为水平

其它功能：暂停播放、前进播放、声音和全屏

 
 
 
 
      
  
  
  
  1. //   
  
  
  
  2. $(document).ready(function() {   
    3.   
  
  
  
  3.     $('video').mediaelementplayer({   
    4.   
  
  
  
  4.         alwaysShowControls: true,   
    5.   
  
  
  
  5.         videoVolume: 'horizontal',   
    6.   
  
  
  
  6.         features: ['playpause','progress','volume','fullscreen']   
    7.   
  
  
  
  7.     });   
    8.   
  
  
  
  8. });   
    9.   
  
  
  
  9. // ]]> 
    10.

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

3.播放器基本样式设计

先修改一下样式设置：

 
 
 
 
      
  
  
  
  1. .mejs-inner,   
    2.   
  
  
  
  2. .mejs-inner div,   
    3.   
  
  
  
  3. .mejs-inner a,   
    4.   
  
  
  
  4. .mejs-inner span,   
    5.   
  
  
  
  5. .mejs-inner button,   
    6.   
  
  
  
  6. .mejs-inner img {   
    7.   
  
  
  
  7.     margin: 0;   
    8.   
  
  
  
  8.     padding: 0;   
    9.   
  
  
  
  9.     border: none;   
    10.   
  
  
  
  10.     outline: none;   
    11.   
  
  
  
  11. } 
    12.

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

 
 
 
 
      
  
  
  
  1. .mejs-container {   
    2.   
  
  
  
  2.     position: relative;   
    3.   
  
  
  
  3.     background: #000000;   
    4.   
  
  
  
  4. }    
    5.   
  
  
  
  5.     
    6.   
  
  
  
  6. .mejs-inner {   
    7.   
  
  
  
  7.     position: relative;   
    8.   
  
  
  
  8.     width: inherit;   
    9.   
  
  
  
  9.     height: inherit;   
    10.   
  
  
  
  10. }    
    11.   
  
  
  
  11.     
    12.   
  
  
  
  12. .me-plugin { position: absolute; }    
    13.   
  
  
  
  13.     
    14.   
  
  
  
  14. .mejs-container-fullscreen .mejs-mediaelement,   
    15.   
  
  
  
  15. .mejs-container-fullscreen video,   
    16.   
  
  
  
  16. .mejs-embed,   
    17.   
  
  
  
  17. .mejs-embed body,   
    18.   
  
  
  
  18. .mejs-mediaelement {   
    19.   
  
  
  
  19.     width: 100%;   
    20.   
  
  
  
  20.     height: 100%;   
    21.   
  
  
  
  21. }    
    22.   
  
  
  
  22.     
    23.   
  
  
  
  23. .mejs-embed,   
    24.   
  
  
  
  24. .mejs-embed body {   
    25.   
  
  
  
  25.     margin: 0;   
    26.   
  
  
  
  26.     padding: 0;   
    27.   
  
  
  
  27.     overflow: hidden;   
    28.   
  
  
  
  28. }    
    29.   
  
  
  
  29.     
    30.   
  
  
  
  30. .mejs-container-fullscreen {   
    31.   
  
  
  
  31.     position: fixed;   
    32.   
  
  
  
  32.     left: 0;   
    33.   
  
  
  
  33.     top: 0;   
    34.   
  
  
  
  34.     right: 0;   
    35.   
  
  
  
  35.     bottom: 0;   
    36.   
  
  
  
  36.     overflow: hidden;   
    37.   
  
  
  
  37.     z-index: 1000;   
    38.   
  
  
  
  38. }    
    39.   
  
  
  
  39.     
    40.   
  
  
  
  40. .mejs-background,   
    41.   
  
  
  
  41. .mejs-mediaelement,   
    42.   
  
  
  
  42. .mejs-poster,   
    43.   
  
  
  
  43. .mejs-overlay {   
    44.   
  
  
  
  44.     position: absolute;   
    45.   
  
  
  
  45.     top: 0;   
    46.   
  
  
  
  46.     left: 0;   
    47.   
  
  
  
  47. }    
    48.   
  
  
  
  48.     
    49.   
  
  
  
  49. .mejs-poster img { display: block; } 
    50.

4.控制面板样式设置

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

 
 
 
 
      
  
  
  
  1. .mejs-overlay-play { cursor: pointer; }      
    2.   
  
  
  
  2. .mejs-inner .mejs-overlay-button {   
    3.   
  
  
  
  3.     position: absolute;   
    4.   
  
  
  
  4.     top: 50%;   
    5.   
  
  
  
  5.     left: 50%;   
    6.   
  
  
  
  6.     width: 50px;   
    7.   
  
  
  
  7.     height: 50px;   
    8.   
  
  
  
  8.     margin: -25px 0 0 -25px;   
    9.   
  
  
  
  9.     background: url(../img/play.png) no-repeat;   
    10.   
  
  
  
  10. } 
    11.

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

 
 
 
 
      
  
  
  
  1. .mejs-container .mejs-controls {   
    2.   
  
  
  
  2.     position: absolute;   
    3.   
  
  
  
  3.     width: 100%;   
    4.   
  
  
  
  4.     height: 34px;   
    5.   
  
  
  
  5.     left: 0;   
    6.   
  
  
  
  6.     bottom: 0;   
    7.   
  
  
  
  7.     background: rgb(0,0,0);   
    8.   
  
  
  
  8.     background: rgba(0,0,0, .7);   
    9.   
  
  
  
  9. }    
    10.   
  
  
  
  10.     
    11.   
  
  
  
  11. .mejs-controls .mejs-button button {   
    12.   
  
  
  
  12.     display: block;   
    13.   
  
  
  
  13.     cursor: pointer;   
    14.   
  
  
  
  14.     width: 16px;   
    15.   
  
  
  
  15.     height: 16px;   
    16.   
  
  
  
  16.     background: transparent url(../img/controls.png);   
    17.   
  
  
  
  17. } 
    18.

#p#

5.视频控制器

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

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

6.音量滑动控制器

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

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

#p#

7.进度条

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

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

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

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

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

9.绿色的已播放进度条

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

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

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

Demo下载地址：

本地下载

designmodo.com

原文链接http://blog.jobbole.com/19321/

【编辑推荐】

  1. HTML 5打造桌面应用
  2. HTML 5实现的图片拖拽分组效果
  3. HTML 5实现淘宝语音搜索功能
  4. HTML 5实现手机摇一摇的功能
  5. HTML 5和CSS3快速制作便签特效

网页标题：HTML 5、CSS3、JS开发播放器完全指南
本文地址：http://www.hantingmc.com/qtweb/news24/543974.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

域名注册知识

同城分类信息

画册设计制作　　 　南京护栏钻孔机　　 　乐山做网站　　 　物流公司网站建设方案　　 　网站建设公司　　 　微信小程序开发　　 　app开发　　 　证企宝　　 　高端网站建设　　 　全网整合营销　　 　成都服务器租用　　 　四川国泰民安消防　　 　做网站　　 　香港云主机　　 　蜜朵婚庆　　 　营销型网站建设　　 　资中网站建设　　 　企业网站建设公司　　 　南充网站制作　　 　中国电信成都枢纽中心