使用MediaElement.js構建個性的HTML5音頻和視頻播放器

在線演示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;
}

定義播放器的播放/暫停按鈕，聲音大小按鈕。

/* 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代碼

<section id="container">
<div class="audio-player">
<h2>Rolling in the deep</h2>
<img class="cover" src="img/gbin1.png" alt="gbin1.com">
<audio id="audio-player" src="media/rollinginthedeep.mp3" type="audio/mp3" controls="controls"></audio>
</div>        
</section> 

這里我們定義了一個音頻MP3播放器，javascript很簡單，具體選項請參考API說明。

另外你可以使用以上類似方法定義一個視頻播放器的CSS，具體請參考文章的代碼下載。

希望大家喜歡這個超棒的HTML5播放器，如果你有問題，請給我們留言，謝謝！