jQuery “jPlayer”
March 17, 2011
Jplayer是一种灵活且功能强大的游戏和控制解决方案 media 网页中的文件. 它支持HTML5,并为尚未支持的浏览器输出flash HTML 5. 其他优点之一是能够使用 HTML and CSS. 欲知详情,请访问官方 website http://www.jplayer.org
JavaScript
我们应该包括jQuery framework and jplayer.min.. Js中指向SRC属性 script tag to those .js files.Initialization script 我们在section中放置. 中定义歌曲列表 array 注意,您应该指定两个音频文件:mp3和ogg. 你可以使用任何声音转换工具.g. http://media.io)
$(document).ready(function(){ var playItem = 0; var myPlayList = [ {名称:“黑工厂”、mp3:“音频/ black_plant.mp3, ogg:“音频/ black_plant.ogg"}, {名称:“隐藏”,mp3:“音频/隐藏起来.mp3, ogg:“音频/隐藏.ogg"}, {名称:“分离”,mp3:“音频/分离.mp3, ogg:“音频/分离.ogg"} ]; // jQuery选择器的本地副本,以提高性能. var jpPlayTime = $("#jplayer_play_time"); var jpTotalTime = $("#jplayer_total_time"); $ (" # jquery_jplayer ").jPlayer({ 准备:函数(){ displayPlayList (); playListInit(true); // Parameter is a boolean for autoplay. }, oggSupport: true }) .jPlayer(“onProgressChange”, 函数(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) { jpPlayTime.text($.jPlayer.convertTime (playedTime)); jpTotalTime.text($.jPlayer.convertTime (totalTime)); }) .jPlayer("onSoundComplete", function() { playListNext(); }); $ (" # jplayer_previous ").点击(function() { playListPrev(); $(this).blur(); return false; }); $ (" # jplayer_next ").点击(function() { playListNext(); $(this).blur(); return false; }); displayPlayList() { $ (" # jplayer_playlist ul ").empty(); for (i=0; i " : "
HTML
下面你可以看到一般 HTML script representation:
- Bubble
CSS
Include the default theme 为玩家连接 .的部分中的CSS文件 .html file&tl,链接的href = " / /文件/ jplayer路径.blue.monday.css" rel="stylesheet" type="text/css" />