jQuery_jquery に基づく Web オーディオおよびビデオ プレーヤーである jPlayer の基本的な使用方法のチュートリアル

jPlayer の紹介:

Web ページで BGM を再生したいのですが、HTML タグは使用したくありません。その方法では、すべての音楽がダウンロードされた後でないと音楽を再生できず、ブラウザ間の互換性が失われやすいためです。問題があるため、jQuery に基づくプレーヤーを選択しました。 jPlayer はそれを実行します。

jPlayer のサイズを設定します
コンストラクターを使用して jPlayer({size:Object}) を構成し、jPlayer の高さと幅を設定します。

コンストラクターを使用して jPlayer({sizeFull:Object}) を構成し、全画面サイズを設定します。

jPlayer の背景色は、コンストラクター設定 jPlayer({backgroundColor:"#RRGGBB"}) を通じて設定できることに注意してください。

Flash セキュリティ ルール
次のコードを使用すると、jPlayer SWF ファイルの制限が緩和され、任意のドメイン名の swf ファイルを呼び出すことができます。

flash.system.Security.allowDomain("*");
flash.system.Security.allowInsecureDomain("*");

展開

通常、swf ファイルと js ファイルをドメイン名の js ディレクトリにアップロードする必要があります。コンストラクター設定 jPlayer({"swfPath":path}) を使用して swf パスを変更します。

厳密に言えば、プラグイン ファイルは jplayer.org にリモートでリンクされている可能性がありますが、現時点では CDN を構築するための十分なリソースがないため、jplayer.com にはリンクしないでください。さらに、リモート サーバー上の Flash 再生ソフトウェアでは、jPlayer("setMedia", media) によって設定されたすべてのマルチメディア ファイル URL が絶対パスを使用する必要があります。

ローカルで開発するには、Apache などのサーバーをコンピュータにインストールして、localhost を有効にする必要があります。

JavaScript API を使用して、Web サイト上のメディア ファイルを制御します。 jPlayer がサポートするメディア形式: HTML5: mp3、m4a (AAC)、m4v (H.264)、ogv*、oga*、wav*、webm* Flash: mp3、m4a (AAC)、m4v (H.264)

jPlayer では、サーバーに 2 つのファイルをアップロードする必要があります:

(1)Jplayer.swf

(2)jquery.jplayer.min.js

jPlayer は jQuery セレクター上に構築されています。アクションを実行するには、$(ID).jPlayer(Object: options) の形式を使用します。場合によっては、ビデオを再生する必要がない場合、jPlayer を本体上に構築することもできます。

注: swfPath。jPlayer SWF ファイルのパスを定義します。 SWF ファイルをサーバーに忘れずにアップロードしてください。 jPlayer({solution:"flash, html") のようなステートメントを使用して、メディアの再生に最初に使用するメソッドを指定することもできます。

初期化後に設定を変更する
初期化後、jPlayer("option",{key:value}) のようなフォームを使用して設定を変更します。
音楽を自動的に再生する Web ページを実装する

$(document).ready(function(){
 $("#jquery_jplayer_1").jPlayer({
 ready: function (event) {
  $(this).jPlayer("setMedia", {
  m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
  oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
  });
 },
 swfPath: "js",
 supplied: "m4a, oga",
 }).jPlayer("play");
});

上記のコードを説明します:

最初の行「$(document).ready(function(){」は誰にとっても非常にフレンドリーなドキュメント読み込みイベントです。

2 行目 "$("#jquery_jplayer_1").jPlayer({" は、HTML5 要素または Flash を運ぶために使用される DIV を選択します。ドキュメント内に空の DIV を記述するだけです。

3行目「ready: function (event) {」、readyはキー、functionは値で、非常に馴染みのあるものです。

4 行目「$(this).jPlayer("setMedia", {"this は "$("#jquery_jplayer_1")" を参照します。」つまり、「$("#jquery_jplayer_1").jPlayer("setMedia "」 , {" はよく知られています。2 番目のステップによると、setMedia はオプションです。

//播放
$("#jpId").jPlayer("play");
//暂停
$("#jpId").jPlayer("pause");
//停止
$("#jpId").jPlayer("stop");
//设置进度相关
//1.按歌曲时长百分比
$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放
$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放
$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放
//2.按播放毫秒数
$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放
$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放
//设定音量
$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%
//绑定事件
//播放结束事件
$("#jpId").jPlayer("onSoundComplete", function() {
  //alert('播放结束了');
  this.element.jPlayer("play"); // 循环播放
});
//播放进行事件
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
  var s = '缓冲百分比:'+lp +'% ,';
  s += '已播放占已缓冲的百分比:'+ppr +'% ,';
  s += '已播放占总时长的百分比:'+ppa +'%';
  s += '已播放时间:'+pt+ '毫秒 ,';
  s += '总时间:'+tt+ '毫秒';
  $("#play_info").text(s);
});