JQUERY教程

当前位置： HTML5技术网 > JQUERY教程 > HTML5 CSS3 jQuery制作视频播放器完全指南

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

JQUERY教程  手机阅读
       导读：毫无疑问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.     margin: 0;
  8.     padding: 0;
  9.     border: none;
  10.     outline: none;
  11. }
复制代码

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

  1. .mejs-container {
  2.     position: relative;
  3.     background: #000000;
  4. }

  6. .mejs-inner {
  7.     position: relative;
  8.     width: inherit;
  9.     height: inherit;
  10. }

  12. .me-plugin { position: absolute; }

  14. .mejs-container-fullscreen .mejs-mediaelement,
  15. .mejs-container-fullscreen video,
  16. .mejs-embed,
  17. .mejs-embed body,
  18. .mejs-mediaelement {
  19.     width: 100%;
  20.     height: 100%;
  21. }

  23. .mejs-embed,
  24. .mejs-embed body {
  25.     margin: 0;
  26.     padding: 0;
  27.     overflow: hidden;
  28. }

  30. .mejs-container-fullscreen {
  31.     position: fixed;
  32.     left: 0;
  33.     top: 0;
  34.     right: 0;
  35.     bottom: 0;
  36.     overflow: hidden;
  37.     z-index: 1000;
  38. }

  40. .mejs-background,
  41. .mejs-mediaelement,
  42. .mejs-poster,
  43. .mejs-overlay {
  44.     position: absolute;
  45.     top: 0;
  46.     left: 0;
  47. }

  49. .mejs-poster img { display: block; }
复制代码

       4.控制面板样式设置

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

  1. .mejs-overlay-play { cursor: pointer; }

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

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

  1. .mejs-container .mejs-controls {
  2.     position: absolute;
  3.     width: 100%;
  4.     height: 34px;
  5.     left: 0;
  6.     bottom: 0;
  7.     background: rgb(0,0,0);
  8.     background: rgba(0,0,0, .7);
  9. }

  11. .mejs-controls .mejs-button button {
  12.     display: block;
  13.     cursor: pointer;
  14.     width: 16px;
  15.     height: 16px;
  16.     background: transparent url(../img/controls.png);
  17. }
复制代码

       5.视频控制器

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

  1. .mejs-controls div.mejs-playpause-button {
  2.     position: absolute;
  3.     top: 12px;
  4.     left: 15px;
  5. }

  7. .mejs-controls .mejs-play button,
  8. .mejs-controls .mejs-pause button {
  9.     width: 12px;
  10.     height: 12px;
  11.     background-position: 0 0;
  12. }

  14. .mejs-controls .mejs-pause button { background-position: 0 -12px; }

  16. .mejs-controls div.mejs-volume-button {
  17.     position: absolute;
  18.     top: 12px;
  19.     left: 45px;
  20. }

  22. .mejs-controls .mejs-mute button,
  23. .mejs-controls .mejs-unmute button {
  24.     width: 14px;
  25.     height: 12px;
  26.     background-position: -12px 0;
  27. }

  29. .mejs-controls .mejs-unmute button { background-position: -12px -12px; }

  31. .mejs-controls div.mejs-fullscreen-button {
  32.     position: absolute;
  33.     top: 7px;
  34.     right: 7px;
  35. }

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

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

  8. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  9.     width: 60px;
  10.     background: #d6d6d6;
  11. }

  13. .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  14.     position: absolute;
  15.     width: 0;
  16.     top: 0;
  17.     left: 0;
  18. }

  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;

  24.     -webkit-border-radius: 2px;
  25.     -moz-border-radius: 2px;
  26.     border-radius: 2px;
  27. }
复制代码

       7.进度条

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

  1. .mejs-controls div.mejs-time-rail {
  2.     position: absolute;
  3.     width: 100%;
  4.     left: 0;
  5.     top: -10px;
  6. }

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

  18. .mejs-controls .mejs-time-rail .mejs-time-total {
  19.     background: rgb(152,152,152);
  20.     background: rgba(152,152,152, .5);
  21. }

  23. .mejs-controls .mejs-time-rail .mejs-time-loaded {
  24.     background: rgb(0,0,0);
  25.     background: rgba(0,0,0, .3);
  26. }

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

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

  20. .mejs-controls .mejs-time-rail .mejs-time-float-current {
  21.     position: absolute;
  22.     display: block;
  23.     left: 0;
  24.     top: 4px;

  26.     font-family: Helvetica, Arial, sans-serif;
  27.     font-size: 10px;
  28.     font-weight: bold;
  29.     color: #666666;
  30.     text-align: center;
  31. }

  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）视频播放器！经过设置还可以支持多种视频格式，所以它不仅仅可以被用来做网络视频播放器，如果你还愿意给它增加一些功能，甚至可以把它可以做成跨平台的本地视频播放器。


转自天地会

【HTML5 CSS3 jQuery制作视频播放器完全指南】相关文章

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

2. jQuery和CSS3定制HTML5视频播放器

3. jQuery和CSS3定制HTML5视频播放器

4. HTML5 视频播放器，Sewise Player 2.5.0 发布

5. 常见HTML5视频播放器介绍

6. jQuery 插件：用于移动项目的响应式音频播放器

7. jQuery 插件：用于移动项目的响应式音频播放器

8. CSS3+jQuery制作灯箱画廊

9. CSS3+jQuery制作灯箱画廊

10. HTML5音频播放器和库

本文来源：https://www.51html5.com/a1107.html

点击展开全部
上一篇：0基础接触html5之jquery（二）选择器 下一篇：0基础接触html5之jquery（一）简介

﹝HTML5 CSS3 jQuery制作视频播放器完全指南﹞相关内容

「HTML5 CSS3 jQuery制作视频播放器完全指南」相关专题

background html5 position 按钮 css jquery absolute
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢

友情链接： 问渠那得清如许 「九年之储」的解释 「隐忍不言」的近义词 关于「马有」的诗句 含「廓」字的成语 「了如指掌」的反义词 机油标号 嘉黎特产 哥哥简谱 运动卫衣