越 来越多的浏览器开始支持HTML5中的音频和视频标签了，现在我们可以方便的使用HTML5标签来开发基于web的应用。 可能有的朋友会问，那么对于以前的老版本浏览器，使用最新的HTML5标签，无法正常识别吧？ 没错，今天我们这里将介绍一个HTML5的音频和视频播放器类库 - ，通过使用这个类库，我们可以方便添加对于老版本浏览器的支持，而无须担心使用最新HTML5的兼容性问题，希望大家喜欢！

什么是MediaElement.js？

MediaElement是一个HTML音频和视频解决方案，你可以：

• 使用HTML5的视频和音频标签及其CSS生成播放器
• 对于老的浏览器，使用自定义的Flash和Silverlight播放器来模拟HTML5
• 支持众多应用的插件，jQuery，Wordpress，Drupel，Joomla等等

如何工作？

添加脚本：

如果你使用MediaElement.js提供的CSS，你可以导入如下CSS：

javascript代码如下：

$('video').mediaelementplayer({    // if the 
      

你可以在不同版本或者类型浏览器下观看效果，基本都可以正常工作。注意不同浏览器支持的视频格式可能不同，所以你最好提供不同的格式的视频源。

这里我们使用自己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;}

定义播放器的播放/暂停按钮，声音大小按钮。

/* 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;}

以上定义了进度条相关CSS。其它代码请参考演示。

Javascript代码

$(function() {    $('#audio-player').mediaelementplayer({        alwaysShowControls: true,        features: ['playpause','volume','progress'],        audioVolume: 'horizontal',        startVolume: 0.8,        loop: true,        audioWidth: 400,        audioHeight: 120    });    });

HTML代码

      
       
        
Rolling in the deep
        
        
       
        
      

这里我们定义了一个音频MP3播放器，javascript很简单，具体选项请参考API说明。

另外你可以使用以上类似方法定义一个视频播放器的CSS，具体请参考文章的代码下载。

希望大家喜欢这个超棒的HTML5播放器，如果你有问题，请给我们留言，谢谢！