詳細教程使用jQuery jPlayer插件給你的站點增加視頻和音頻功能

這篇文章將主要探計關於怎麼增加自定義視頻和語音播放功能在你的WEB網站裏面。這個是一個非常好的jQuery新插件(jPlayer)， 包括很多功能 : 它允許你播放多媒體文件, 暫停，音量調整，它擁有視頻和音頻播放功能會用到的所有功能控掉，同樣他允許你改變它的所有樣式(styles),因爲他的全部外觀都是在一個css文件 裏面。另外，它同樣支持HTML5 和支持所有主流的瀏覽器。它目前支持的格式有: mp3, ogg, m4a, m4v, ogv, wav等等。


簡短的介紹以後，我們開始詳細編碼過程:

1. HTML
首先開始HTML部件

 

<link rel="stylesheet" href="css/jplayer.blue.monday.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example">
    <div>
        <div class="players">
            <h2>Audio player</h2>
            <div class="jp-audio">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                    <div id="jp_interface_1" class="jp-interface">
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        </ul>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                    </div>
                    <div id="jp_playlist_1" class="jp-playlist">
                        <ul>
                            <li>Audio track</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="players">
            <h2>Video player</h2>
            <div class="jp-video jp-video-270p">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_2" class="jp-jplayer"></div>
                    <div id="jp_interface_2" class="jp-interface">
                        <div class="jp-video-play"></div>
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        </ul>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                    </div>
                    <div id="jp_playlist_2" class="jp-playlist">
                        <ul>
                            <li>Tokyo weather</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在上同畫出2播放器 - 音頻和視頻，它們兩個的代碼類似.

2. CSS

需要用到的CSS樣式

 

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;height:500px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.example .players{float:left;margin:10px}

其它css文件(相關的圖片文件):
css/jplayer.blue.monday.css, css/jplayer.blue.monday.jpg, css/jplayer.blue.monday.video.play.png, css/jplayer.blue.monday.video.play.hover.png and css/pbar-ani.gif這些全部包括在源碼包裏面.

3. JS這裏是全部需要用到的js文件在這個例子中.

js/main.js

 

$(document).ready(function(){
    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "media/track.mp3",
            }).jPlayer("play"); // auto play
        },
        ended: function (event) {
            $(this).jPlayer("play");
        },
        swfPath: "swf",
        supplied: "mp3"
    })
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
            $(this).jPlayer("pauseOthers");
    });
    $("#jquery_jplayer_2").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: "media/tokyo.m4v",
                ogv: "media/tokyo.ogv",
                poster: "media/poster.jpg"
            });
        },
        ended: function (event) {
            $("#jquery_jplayer_2").jPlayer("play", 0);
        },
        swfPath: "js",
        supplied: "m4v, ogv",
        cssSelectorAncestor: "#jp_interface_2"
    })
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
            $(this).jPlayer("pauseOthers");
    });
});

js/jquery.min.js and js/jquery.jplayer.min.js這幾個是公共的文件 - jQuery庫與播放插件js文件.


4. SWF
使用flash swf文件: 例子中的主播放器.

swf/Jplayer.swf

到這裏差不多全部完成. 所有測試的多媒體播放文件都放置在‘media’ 下面.
音頻文件 -  track.mp3,
視頻文件: tokyo.m4v + tokyo.ogv,
縮略圖(poster): poster.jpg
如果你有遇到一個奇怪的問題和 ogg文件(oga, ogv, ogg) 不能使有，請嘗試在你的 .htaccess 裏面增加:
AddType audio/ogg .oga
AddType video/ogg .ogv .ogg

 

在線DEMO例子

 

轉載請保留出自:   IT快訊網   |  原文地址: 詳細教程使用jQuery jPlayer插件給你的站點增加視頻和音頻功能