Tutorial penggunaan asas jPlayer, audio web dan pemain video berdasarkan jQuery_jquery

Pengenalan jPlayer:

Saya mahu memainkan muzik latar belakang pada halaman web, tetapi saya tidak mahu menggunakan tag html, kerana dengan cara itu muzik hanya boleh dimainkan selepas semua muzik dimuat turun dan ia terdedah kepada keserasian merentas pelayar masalah, jadi saya memilih pemain berdasarkan jQuery jPlayer melakukannya.

Tetapkan saiz jPlayer
Gunakan pembina untuk mengkonfigurasi jPlayer({size:Object}) untuk menetapkan ketinggian dan lebar jPlayer.

Gunakan pembina untuk mengkonfigurasi jPlayer({sizeFull:Object}) untuk menetapkan saiz skrin penuh.

Perhatikan bahawa warna latar belakang jPlayer boleh ditetapkan melalui konfigurasi pembina jPlayer({backgroundColor:"#RRGGBB"}).

Peraturan Keselamatan Flash
Gunakan kod berikut untuk melonggarkan sekatan pada fail SWF jPlayer, dan anda boleh memanggil fail swf dari mana-mana nama domain.

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

Pengerahan

Biasanya, anda perlu memuat naik fail swf dan fail js ke direktori js di bawah nama domain anda. Tukar laluan swf menggunakan konfigurasi pembina jPlayer({"swfPath":path}).

Tegasnya, fail pemalam mungkin dipautkan dari jauh ke jplayer.org, tetapi kami meminta anda untuk tidak memaut ke jplayer.com kerana pada masa ini kami tidak mempunyai sumber yang mencukupi untuk membina CDN. Selain itu, perisian main balik Flash pada pelayan jauh memerlukan semua URL fail multimedia yang ditetapkan oleh jPlayer("setMedia", media) menggunakan laluan mutlak.

Untuk membangunkan secara tempatan, anda perlu memasang pelayan pada komputer anda, seperti apache, untuk membolehkan localhost.

Gunakan API Javascript untuk mengawal fail media di tapak web anda format media yang disokong jPlayer: HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)

jPlayer memerlukan dua fail untuk dimuat naik ke pelayan anda:

(1)Jplayer.swf

(2)jquery.jplayer.min.js

jPlayer dibina pada pemilih jQuery. Gunakan borang $(ID).jPlayer(Object: options) untuk melaksanakan tindakan. Dalam sesetengah kes, jPlayer juga boleh dibina pada badan, yang bermaksud apabila anda tidak perlu memainkan video.

Nota: swfPath, yang mentakrifkan laluan fail SWF jPlayer. Ingat untuk memuat naik fail SWF ke pelayan anda! Anda juga boleh menggunakan pernyataan seperti jPlayer({solution:"flash, html") untuk menentukan kaedah yang harus digunakan dahulu untuk memainkan media.

Tukar tetapan selepas pemula
Selepas permulaan, gunakan borang yang serupa dengan jPlayer("option",{key:value}) untuk menukar tetapan.
Laksanakan halaman web yang memainkan muzik secara automatik

$(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");
});

Terangkan kod di atas:

Barisan pertama "$(document).ready(function(){" sangat mesra kepada semua orang, acara memuatkan dokumen.

Barisan kedua "$("#jquery_jplayer_1").jPlayer({" memilih DIV, yang digunakan untuk membawa elemen HTML5 atau Flash. Anda hanya boleh menulis DIV kosong dalam dokumen.

Baris ketiga "sedia: fungsi (acara) {", sedia ialah kunci, fungsi ialah nilai, sesuatu yang sangat biasa.

Baris keempat "$(this).jPlayer("setMedia", {"ini merujuk kepada "$("#jquery_jplayer_1")", yang bermaksud: "$("#jquery_jplayer_1").jPlayer("setMedia " , {" sangat biasa. setMedia ialah pilihan, mengikut langkah kedua.

Baris kesembilan "swfPath: "js", ini mentakrifkan laluan relatif di mana pemain swf berada Jika anda tidak bercadang untuk serasi dengan halaman web yang tidak menyokong HTML5, anda tidak perlu menulis ia :)

Format disokong oleh baris 10 "disediakan: "m4a, oga",".

Barisan kesebelas "jPlayer("play");" bermaksud: $("#jquery_jplayer_1").jPlayer("play");, memainkan media dan merealisasikan main balik automatik.

Kaedah yang biasa digunakan dalam jPlayer:

//播放
$("#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);
});