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

播放器最终效果预览图

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的设置文档。

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

你可能感兴趣的:(html5,视频播放器)