PC 반응형 음악플레이어(모바일 호환) > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

PC 반응형 음악플레이어(모바일 호환) 정보

레이아웃 PC 반응형 음악플레이어(모바일 호환)

첨부파일

responsive_jukebox_pl54.tar (13.8M) 43회 다운로드 2020-08-01 23:18:37 포인트 차감10
responsive_jukebox.tar (13.8M) 5회 다운로드 2020-08-01 23:18:37 포인트 차감10
테스트한 버전5.4
호환 가능 버전모든 php 버전에서 호환

본문

세부적인 사항은 https://sir.kr/g5_skin/38807 자료를 참고해 주세요

첫번째 첨부파일의 글자가 깨져서 보이는 분은 두번째 첨부파일로 대체하시기 바랍니다.

(첫번째파일 utf-8, 두번째파일 euc-kr 각각 인코딩입니다.)

 

미리보기: utf-8 인코딩 (php5.1 이상버전)

http://eunsolee.net/responsive_jukebox_pl54/musicplayer/player/index.php

 

미리보기: euc-kr 인코딩 (php 5.1 이하 버전, 제로보드4등...)

http://eunsolee.com/responsive_jukebox/musicplayer/player/index.php

 

mp3 파일을 사용하실때는 유튜브나 기타 공유 사이트에서

"저작권이 없는 음악, 저작권이 없는 팝송"등으로 검색하신후 mp3파일로 변환해서

사용하시기 바랍니다.  카페나 기타 자영업등을 하시는 분들의 매장에서

본인이 원하는 노래로 플레이 리스트를 만들어 사용하시면 좋을듯 해서 올립니다.

 

재생시 시작은 정지상태 입니다. 해당부분을 자동시작으로 변경하시려면

아래 경로의 스크립트를 찾아 다음과 같이수정해 주시면 됩니다.

../dist/add-on/jplayer.playlist.min.js 를 에디터 플러스와같은

편집기로 열고 Shift+F버튼(찾기)을 누르신후 autoPlay 를 검색합니다.

아래의 기본상태는 autoPlay:!1,loopOnPrevious

autoPlay:!1 입니다. 이부분을 0으로 고치시면 PC 및 모바일 접속시에도

자동으로 플레이 됩니다.

 

모바일 재생시 보여지는 플레이어와 리스트에 대한 크기 지정.

편집기로 dist/skin/blue.monday/css/jplayer.blue.monday.css 를 열고

49번과 53번줄을 수정하시면 됩니다.

(반응형 100%로 되어있으니 특수한경우외에 수정하지 마세요.)

 

.jp-video-360p {
  width: 100%; }

.jp-video-full {
  /* Rules for IE6 (full-screen) */
  width: 100%;
  height: 270px;

 

플레이어의 포스터(화면에 보이는 이미지) 크기 수정.

편집기로 musicplayer/player/index.php 를 열고

110번과 111번째 줄을 수정하시면 됩니다.

가로크기는 100% 반응형으로 되있으나 세로크기 270px는 사용하시는 분에 따라 상이할수 있으니

해당부분을 원하시는 세로 크기로 수정하시면 됩니다.

   width: "100%",
   height: "270px",

 

음악플레이어를 PC 및 모바일등에서 모두 사용하고자 하실 경우

다른이름으로 플레이어를 생성하신후 아래의 경로에서

../../dist/skin/blue.monday/css/jplayer.blue.monday.css 를

m.jplayer.blue.monday.css 등과같이 생성후 css 속성에서 폰트크기를 변경해줍니다.

편집기로 여신후 32번째 줄에 폰트 크기를 지정하는 곳이 있습니다.

33번째줄은 웹폰트등을 지정하는곳 입니다. 참고바랍니다.

  font-size: 16px;
  font-family: Verdana, Arial, sans-serif;

 

아래의 스크립트를 PC용 플레이어의 헤더에 삽입하신후

모바일접속시 보여질 모바일용 플레이어의 경로를 적어주시면 됩니다.

사용예제 입니다.

PC용 플레이어 (PC로 실행했을경우 나타남)

http://eunsolee.com/responsive_jukebox/musicplayer/player/list_01.php

mobile용 플레이어 (PC가 아닌 모바일기기에서 접속했을경우 나타남)

글자크기와 이미지 크기가 모바일 환경에 맞게 맞춰짐.

http://eunsolee.com/responsive_jukebox/musicplayer/player/m.list_01.php

 

<script language="javascript"> //Go to  Mobile Page
  // Mobile여부를 구분하기 위함
  var uAgent = navigator.userAgent.toLowerCase();
   
  // 아래는 모바일 장치들의 모바일 페이지 접속을위한 스크립트
  var mobilePhones = new Array('iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce','nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');
  for (var i = 0; i < mobilePhones.length; i++)
  if (uAgent.indexOf(mobilePhones[i]) != -1)
  document.location = "m.list_01.php";
  </script>

 

추천
3

댓글 전체

감사합니다.

PC 반응형 음악플레이어(모바일 호환)
PC 반응형 음악플레이어(퍼플스킨)

두가지 다 받았습니다.

skin/board/ 에 올렸습니다.
새로 게시판 하나 만들고 스킨을 설정했습니다.
그런대 안나오내요......

아미나빌더를 사용하고 있습니다.
아미나는 지원이 않되는건가요?
방법이 있다면......
알려주시기를 부탁드립니다.
답변이 늦어서 죄송합니다 요즘 눈코뜰새없이 바쁘다보니 이제야 답변남깁니다 ㅠㅠ 음악플레이어와 유튜브 플레이어 모두 그누보드 설치형이 아니라 단독 웹프로그램입니다. 홈페이지 꾸밀때 유용하게 사용하시라고 올린거에요 압축해제후 폴더째 업로드 하신후 해당 인덱스파일을 불러오시면 됩니다. 상위 예제처럼 폴더째 계정서버에 업로드후 index.php를 주소표시줄에 입력후 불러오세요
안녕하세요~ 잘 사용하고 있어요! 감사합니다. 그런데 이게,  pc 버전만 가능할까요? 모바일은 작동이 안하는것 같아요. jplayer 관련 오류 같기도 합니다만, 샘플로 올려주신 사이트도 작동하지 않고, pc 에서는 되는 링크도 모바일에서는 영상 자체가 플레이가 안되요. 혹시 어떤 부분을 패치 하여야 할지,, 조언 부탁드려요. 감사합니다
위 두분 오랜만에 와서 늦게 답변드리는점 양해바랄께요... ㅠㅠ
index.php 를 메모장이나 에디터로 열어서 보시면 음악파일 경로 부분이 보일겁니다.
해당부분의 줄을 적용하실 음악파일 경로로 고쳐주세요.
추가하실때는 경로부분을 복사후 붙여넣기 하신후 다른곡의 경로를 추가해 주시면 됩니다.
참고하세요. 그누보드 스킨이 아니라 http://exmple.com/jukebox/index.php 의 예시처럼
자신의 호스팅 서버에 업로드후 jukebox/index.php 불러오시면 되는겁니다.
html5 버전이라 크롬에 최적화 되어있습니다.
크롬에서 확인해보시면 잘 나올겁니다. 저는 pc방, 집 모두 확인했는데 이상없이 잘나옵니다.
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT