jQuery_jquery를 기반으로 하는 웹 오디오 및 비디오 플레이어인 jPlayer의 기본 사용 튜토리얼입니다.

jPlayer 소개:

웹 페이지에서 배경 음악을 재생하고 싶지만 html 태그를 사용하고 싶지 않습니다. 그렇게 하면 모든 음악을 다운로드한 후에만 음악을 재생할 수 있고 브라우저 간 호환성이 발생하기 쉽기 때문입니다. 문제가 발생했기 때문에 jQuery jPlayer를 기반으로 플레이어를 선택했습니다.

jPlayer 크기 설정
생성자를 사용하여 jPlayer({size:Object})를 구성하여 jPlayer의 높이와 너비를 설정합니다.

생성자를 사용하여 jPlayer({sizeFull:Object})를 구성하여 전체 화면 크기를 설정합니다.

jPlayer 배경색은 생성자 구성 jPlayer({BackgroundColor:"#RRGGBB"})를 통해 설정할 수 있습니다.

플래시 보안 규칙
다음 코드를 사용하여 jPlayer SWF 파일에 대한 제한을 완화하면 모든 도메인 이름의 swf 파일을 호출할 수 있습니다.

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

배포

일반적으로 swf 파일과 js 파일을 도메인 이름 아래의 js 디렉터리에 업로드해야 합니다. 생성자 구성 jPlayer({"swfPath":path})를 사용하여 swf 경로를 변경합니다.

엄밀히 말하면 플러그인 파일이 jplayer.org에 원격으로 연결될 수 있지만 현재 CDN을 구축할 리소스가 충분하지 않기 때문에 jplayer.com에 연결하지 마시기 바랍니다. 또한 원격 서버의 플래시 재생 소프트웨어에서는 jPlayer("setMedia", media)가 설정한 모든 멀티미디어 파일 URL이 절대 경로를 사용해야 합니다.

로컬에서 개발하려면 컴퓨터에 Apache와 같은 서버를 설치하여 localhost를 활성화해야 합니다.

Javascript API를 사용하여 웹사이트의 미디어 파일 제어 jPlayer 지원 미디어 형식: HTML5: mp3, m4a(AAC), m4v(H.264), ogv*, oga*, wav*, webm* 플래시: mp3, m4a (AAC), m4v(H.264)

jPlayer를 사용하려면 서버에 두 개의 파일을 업로드해야 합니다.

(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})와 유사한 형식을 사용하여 설정을 변경합니다.
자동으로 음악을 재생하는 웹페이지 구현

$(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(){"은 모두에게 매우 친숙한 문서 로딩 이벤트입니다.

두 번째 줄 "$("#jquery_jplayer_1").jPlayer({"는 HTML5 요소나 Flash를 전달하는 데 사용되는 DIV를 선택합니다. 문서에 빈 DIV를 작성하면 됩니다.

세 번째 줄 "ready: function(event) {", Ready는 키, function은 값, 매우 친숙한 내용입니다.

네 번째 줄 "$(this).jPlayer("setMedia", {"this는 "$("#jquery_jplayer_1")"를 의미합니다. 이는 "$("#jquery_jplayer_1").jPlayer("setMedia "를 의미합니다. , {"는 매우 친숙합니다. 두 번째 단계에 따르면 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);
});