施用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音频和视频播放器