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

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

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

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

  • alwaysShowControls – "true"则设置video控制面板永远显示，"false"则在鼠标移走后隐藏。
  • videoVolume – "horizontal"设置音量滑动控制器为水平
  • 其它功能：暂停播放、前进播放、声音和全屏 
          
      
      
      
      
       
       
       
       
    1. <script type="text/javascript">//  
      2. 
       
       
       
       
    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. // ]]>script> 
      10.

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

由于篇幅有限，详情请点http://blog.csdn.net/chenguangning123/article/details/8107719