jQuery “jPlayer”

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 " : "

"; listItem += ""+ myPlayList[i].name +"

"; $ (" # jplayer_playlist ul ").append(listItem); $ (" # jplayer_playlist_item_ " + i).数据(“索引”，I).click( function() { Var index = $(this).data("index"); if (playItem != index) { playListChange(索引); } else { $ (" # jquery_jplayer ").jPlayer("play"); } $(this).blur(); return false; }); } } function playListInit(播放){ if(autoplay) { playListChange(playItem); } else { playListConfig(playItem); } } function playListConfig(index) { $ (" # jplayer_playlist_item_ " + playItem).removeClass(“jplayer_playlist_current”).parent().removeClass(“jplayer_playlist_current”); $ (" # jplayer_playlist_item_ " +指数).addClass(“jplayer_playlist_current”).parent().addClass(“jplayer_playlist_current”); playItem = index; $ (" # jquery_jplayer ").jPlayer(“setFile myPlayList [playItem].mp3, myPlayList [playItem].ogg); } function playListChange(index) { playListConfig(索引) $ (" # jquery_jplayer ").jPlayer("play"); } function playListNext() { var index = (playItem+1 = 0) ? 1:我的播放列表.length-1; playListChange(索引); } });

HTML

下面你可以看到一般 HTML script representation:

  

    
play
      
pause
      
stop
      
min volume
      
max volume
    

      

        

      
    
    

      

    
    

    

  
  

    
Bubble
    

CSS

Include the default theme 为玩家连接 .的部分中的CSS文件 .html file

&tl,链接的href = " / /文件/ jplayer路径.blue.monday.css" rel="stylesheet" type="text/css" />