jplayer

简介

jplayer是个用JavaScript写的完全免费和开源的媒体库(media library)。作为jQuery插件的一员，使用jPlayer可以在你的网页上轻松加入跨平台的音乐和视频

使用方法

官网下载：http://www.jplayer.org/download/

jquery.jplayer.min.js
jquery.Jplayer.swf

引入：

<script type="text/javascript" src="../../js/plugin/jplayer/jquery.jplayer.min.js"></script>

html

<!--jqPlayBox-->
                <div class="jqPlayBox">
                    <div id="jquery_jplayer" class="jp-jplayer"></div>
                    <div id="jp_container" class="jp-audio" role="application" aria-label="media player">
                        <div class="jp-type-single">
                            <div class="jp-gui jp-interface">
                                <div class="jp-controls">
                                    <button class="jp-play playBtn" role="button" tabindex="0">play</button>
                                    <button class="jp-stop" role="button" tabindex="0">stop</button>
                                </div>
                                <div class="jp-progress">
                                    <div class="jp-seek-bar">
                                        <div class="jp-play-bar"></div>
                                    </div>
                                </div>
                                <div class="jp-time-holder">
                                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                                    <div class="jp-toggles">
                                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
               </div>
               <!--jqPlayBox End-->

js

$("#jquery_jplayer").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                m4a:  "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            }).jPlayer("play");
        },
        swfPath: "../../dist/jplayer",
        supplied: "mp3, wav , oga ,m4a",
        cssSelectorAncestor: "#jp_container",
        wmode: "window",
        useStateClassSkin: false,
        autoBlur: false,
        smoothPlayBar: true,//平滑过渡播放条
        keyEnabled: true,
        toggleDuration: true
    });