HTML5和css3实例:制作HTML5网页视频播放器

2012-05-15 11:27:37  来源:designmodo.com 

网页制作Webjx文章简介:HTML5+CSS3+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. }
  5. .mejs-inner {
  6. position: relative;
  7. width: inherit;
  8. height: inherit;
  9. }
  10. .me-plugin { position: absolute; }
  11. .mejs-container-fullscreen .mejs-mediaelement,
  12. .mejs-container-fullscreen video,
  13. .mejs-embed,
  14. .mejs-embed body,
  15. .mejs-mediaelement {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. .mejs-embed,
  20. .mejs-embed body {
  21. margin: 0;
  22. padding: 0;
  23. overflow: hidden;
  24. }
  25. .mejs-container-fullscreen {
  26. position: fixed;
  27. left: 0;
  28. top: 0;
  29. right: 0;
  30. bottom: 0;
  31. overflow: hidden;
  32. z-index: 1000;
  33. }
  34. .mejs-background,
  35. .mejs-mediaelement,
  36. .mejs-poster,
  37. .mejs-overlay {
  38. position: absolute;
  39. top: 0;
  40. left: 0;
  41. }
  42. .mejs-poster img { display: block; }

4.控制面板样式设置

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

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

接下来再添加视频控制器布局:将它放在视频底部,高度为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. }
  10. .mejs-controls .mejs-button button {
  11. display: block;
  12. cursor: pointer;
  13. width: 16px;
  14. height: 16px;
  15. background: transparent url(../img/controls.png);
  16. }

共3页: 上一页 1 [2] [3] 下一页
更多