越來(lái)越多的瀏覽器開(kāi)始支持HTML5中的音頻和視頻標(biāo)簽了,現(xiàn)在我們可以方便的使用HTML5標(biāo)簽來(lái)開(kāi)發(fā)基于web的應(yīng)用。 可能有的朋友會(huì)問(wèn),那么對(duì)于以前的老版本瀏覽器,使用最新的HTML5標(biāo)簽,無(wú)法正常識(shí)別吧? 沒(méi)錯(cuò),今天我們這里將介紹一個(gè)HTML5的音頻和視頻播放器類庫(kù) - MediaElement.js ,通過(guò)使用這個(gè)類庫(kù),我們可以方便添加對(duì)于老版本瀏覽器的支持,而無(wú)須擔(dān)心使用最新HTML5的兼容性問(wèn)題,希望大家喜歡!
什么是MediaElement.js?
MediaElement是一個(gè)HTML音頻和視頻解決方案,你可以:
- 使用HTML5的視頻和音頻標(biāo)簽及其CSS生成播放器
- 對(duì)于老的瀏覽器,使用自定義的Flash和Silverlight播放器來(lái)模擬HTML5
- 支持眾多應(yīng)用的插件,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,你可以導(dǎo)入如下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來(lái)開(kāi)發(fā)個(gè)性化的播放器。
創(chuàng)建個(gè)性化的音頻/視頻播放器
CSS代碼
因?yàn)槿笔ediaelement帶有CSS定義文件,如果你對(duì)它的UI不是很滿意的話,你可以自己定義對(duì)應(yīng)的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; }
以上定義了進(jìn)度條相關(guān)CSS。其它代碼請(qǐng)參考演示。
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>
這里我們定義了一個(gè)音頻MP3播放器,javascript很簡(jiǎn)單,具體選項(xiàng)請(qǐng)參考API說(shuō)明。
另外你可以使用以上類似方法定義一個(gè)視頻播放器的CSS,具體請(qǐng)參考文章的代碼下載。
希望大家喜歡這個(gè)超棒的HTML5播放器,如果你有問(wèn)題,請(qǐng)給我們留言,謝謝!
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
