使用MediaElement.js构建个性的HTML5音频和视频播放器
日期：2012-5-2??来源：GBin1.com
在线演示1? 在线演示2? 本地下载
越来越多的浏览器开始支持HTML5中的音频和视频标签了，现在我们可以方便的使用HTML5标签来开发基于web的应用。 可能有的朋友会问，那么对于以前的老版本浏览器，使用最新的HTML5标签，无法正常识别吧？ 没错，今天我们这里将介绍一个HTML5的音频和视频播放器类库 - MediaElement.js，通过使用这个类库，我们可以方便添加对于老版本浏览器的支持，而无须担心使用最新HTML5的兼容性问题，希望大家喜欢！
什么是MediaElement.js？MediaElement是一个HTML音频和视频解决方案，你可以：
使用HTML5的视频和音频标签及其CSS生成播放器对于老的浏览器，使用自定义的Flash和Silverlight播放器来模拟HTML5支持众多应用的插件，jQuery，Wordpress，Drupel，Joomla等等
添加脚本：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="js/mediaelement-and-player.js"></script>
如果你使用MediaElement.js提供的CSS，你可以导入如下CSS：
<link rel="stylesheet" href="mediaelementplayer.css" />
javascript代码如下：
$('video').mediaelementplayer({??? // if the <video width> is not specified, this is the default??? defaultVideoWidth: 480,??? // if the <video height> is not specified, this is the default??? defaultVideoHeight: 270,??? // if set, overrides <video width>??? videoWidth: -1,??? // if set, overrides <video height>??? videoHeight: -1,??? // width of audio player??? audioWidth: 400,??? // height of audio player??? audioHeight: 30,??? // initial volume when the player starts??? startVolume: 0.8,??? // useful for <audio> player loops??? loop: false,??? // enables Flash and Silverlight to resize to content size??? enableAutosize: true,??? // the order of controls you want on the control bar (and other plugins below)??? features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],??? // Hide controls when playing and mouse is not over the video??? alwaysShowControls: false,??? // force iPad's native controls??? iPadUseNativeControls: false,??? // force iPhone's native controls??? iPhoneUseNativeControls: false,??? // force Android's native controls??? AndroidUseNativeControls: false,??? // forces the hour marker (##:00:00)??? alwaysShowHours: false,??? // show framecount in timecode (##:00:00:00)??? showTimecodeFrameCount: false,??? // used when showTimecodeFrameCount is set to true??? framesPerSecond: 25,??? // turns keyboard support on and off for this instance??? enableKeyboard: true,??? // when this player starts, it will pause other players??? pauseOtherPlayers: true,??? // array of keyboard commands??? keyActions: []});你可以在不同版本或者类型浏览器下观看效果，基本都可以正常工作。注意不同浏览器支持的视频格式可能不同，所以你最好提供不同的格式的视频源。
这里我们使用自己CSS来开发个性化的播放器。
创建个性化的音频/视频播放器CSS代码因为缺省mediaelement带有CSS定义文件，如果你对它的UI不是很满意的话，你可以自己定义对应的CSS：
div.audio-player {?? ?position: relative;?? ?width: 400px;?? ?height: 120px;?? ??? ?background: #4c4e5a;?? ?background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);?? ?background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);?? ?background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);?? ?background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);?? ?background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);?? ?-webkit-border-radius: 3px;?? ?-moz-border-radius: 3px;?? ?border-radius: 3px;?? ?box-shadow: 0px 0px 25px #404040;}以上定义播放器。
/* Buttons */.mejs-controls .mejs-button button {?? ?cursor: pointer;?? ?display: block;?? ?position: absolute;?? ?text-indent: -9999px;}/* Play & Pause */.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {?? ?width: 21px;?? ?height: 21px;?? ?top: 35px;?? ?left: 135px;?? ?background: transparent url(../img/play-pause.png) 0 0;}.mejs-controls .mejs-pause button { background-position:0 -21px; }/* Mute & Unmute */.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {?? ?width: 14px;?? ?height: 12px;?? ?top: 70px;?? ?left: 140px;?? ?background: transparent url(../img/mute-unmute.png) 0 0;}.mejs-controls .mejs-unmute button { background-position: 0 -12px; }/* Volume Slider */.mejs-controls div.mejs-horizontal-volume-slider {?? ?position: absolute;?? ?top: 71px;?? ?left: 165px;?? ?cursor: pointer;}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {?? ?width: 200px;?? ?height: 8px;?? ?background: #212227;?? ?-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);?? ?-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);?? ?box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);?? ?-webkit-border-radius: 6px;?? ?-moz-border-radius: 6px;?? ?border-radius: 6px;}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {?? ?position: absolute;?? ?width: 0;?? ?height: 6px;?? ?top: 1px;?? ?left: 1px;?? ?background: url(../img/volume-bar.png) repeat-x;?? ?-webkit-border-radius: 6px;?? ?-moz-border-radius: 6px;?? ?border-radius: 6px;}/* Progress Slider */.mejs-controls div.mejs-time-rail { width: 400px; }.mejs-controls .mejs-time-rail span {?? ?position: absolute;?? ?display: block;?? ?width: 400px;?? ?height: 5px;?? ?left: 0;?? ?bottom: 0;?? ?cursor: pointer;?? ??? ?-webkit-border-radius: 0px 0px 2px 2px;?? ?-moz-border-radius: 0px 0px 2px 2px;?? ?border-radius: 0px 0px 2px 2px;}.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }.mejs-controls .mejs-time-rail .mejs-time-loaded {?? ?width: 0;?? ?background: #cccccc;}.mejs-controls .mejs-time-rail .mejs-time-current {?? ?width: 0;?? ?background: #2B99E6;}定义播放器的播放/暂停按钮，声音大小按钮。
.....来源：使用MediaElement.js构建个性的HTML5音频和视频播放器