PC 반응형 음악플레이어(모바일 호환) 정보
레이아웃 PC 반응형 음악플레이어(모바일 호환)관련링크
첨부파일
본문
세부적인 사항은 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 를 메모장이나 에디터로 열어서 보시면 음악파일 경로 부분이 보일겁니다.
해당부분의 줄을 적용하실 음악파일 경로로 고쳐주세요.
추가하실때는 경로부분을 복사후 붙여넣기 하신후 다른곡의 경로를 추가해 주시면 됩니다.
참고하세요. 그누보드 스킨이 아니라 http://exmple.com/jukebox/index.php 의 예시처럼
자신의 호스팅 서버에 업로드후 jukebox/index.php 불러오시면 되는겁니다.
혹시 m3u8파일은 지원이 안되나요?
크롬에서 확인해보시면 잘 나올겁니다. 저는 pc방, 집 모두 확인했는데 이상없이 잘나옵니다.