2018. 11. 6. 21:19

jw플레이어를 이용해서 여러곡을 올리기비공개

 

 위의 플레이어는 JW2.3입니다.

비록 지금의 5버전과 같은 고버전은 아니지만 음악 올리기에는 더 없이 좋고 누구나가 다

쉽게 제작할 수 있어서 일단은 하나 올려 봅니다. 수동으로 올렸으니 플레이 누르면 노래 나옵니다.

 

먼저 상단의 첨부파일을 열어보면

PLAYER 와 config.xml 과 file.xml 이 세가지 파일이 있습니다..

플레이어는 먼저 말씀 드린거와 같이 2.3버전입니다.

config.xml 는 옵션 사항을 기술하는 파일이죠..

file.xml  은 음원과 제목을 써 넣는 파일문서입니다.

 

먼저 소스는 이렇습니다.

<EMBED src=http://nclubftp.chol.com/board_pds/2011/b/01/player23.swf width="248" height="260"

type=application/x-shockwave-flash autostart="true" wmode="transparent" flashvars="config=

http://nclubftp.chol.com/board_pds/2011/b/01/C.xml&file=http://nclubftp.chol.com/board_

pds/2011/b/01/F.xml">

 

파란색: PLAYER

빨간색: config.xml 파일

초록색: 음악 LIST 파일

 

★세부사항★

config.xml 파일을 열어보면

 

<mp3config>   
    1.<autostart>true</autostart>
    2.<shuffle>false</shuffle>   
    3.<repeat>all</repeat> 
    4.<volume>100</volume> 
    5.<showdisplay>true</showdisplay>
    6.<showplaylist>true</showplaylist> 
    7.<backcolor>0xffffff</backcolor>
    8.<frontcolor>0xffffff</frontcolor>
    9.<lightcolor>0xffffff</lightcolor>
    10.<jpgfile>http://apple.chol.com/userimgs/y/y100ok/main_e46773c5cb.swf</jpgfile>
</mp3config>

 

이렇구요,,,

1. 자동플레이 하것인가 수동으로 할 것인가를 정하는거죠..

  수동으로 할려면 false 하면 되것죠..

2. 첫곡 부터 순서대로 재생할 것인지 아니면 랜덤으로 재생할 것인지를 정하는 겁니다.

   랜덤으로 재생할려면 true하면 되구요,,

3. 전체 반복,, 방법은 똑 같구요,

4. 볼륨의 수치를 말하죠..100은 최대치죠.. 80, 70, 50 등등 원하는대로 쓰면 됩니다.

5. 이쿼라이저를 보이게 할것인지 안보이게 할 것인지를 묻는거죠..

6. 리스트(제목란) 을 보일것인가 아니 보일것인가를...

7. 8.9. : 제목, 이퀄라이저, 실행 노래 제목 등, 이 부분의 색상을 정하는거죠..

  직접 해보면 되구요, 색상표를 이용해서 위의 양식대로 0x 요 뒤에 색상코드 넣으면 됩니다.

그리고 마지막으로

10. 이게 참 좋은 옵션인데요,,

   여기에 이미지 파일을 넣을 수 잇습니다.이 플레이어의 배경을 직접 삽입할 수 있다는...

   그런데 주의 할 점은 이미지 사이즈를 정하고 해야 합니다. 즉, 플레이어의 전체 크기를 300에

   500  한다면 이미지 크기도 300에 500사이즈로 맞춰줘야 잘리는게 없는 소립니다.

   직접 해 보면 알거구요,,,

특히 좋은점은 이미지 파일이 아니더라도 swf파일도 들어 간다는 점입니다.

저처럼 브렌드모드 swf 파일을 넣어서 할 수 있지요.. 뭐 또다른 자신만의

swf를 만들어서 넣어 멋진 배경이 될 수있도록 만들어도 되지요..

 

이렇게 config.xml 파일에 대해서 알아보았구요,,,

 

이젠 play list.xml파일에 대해서 알아 봅시다. 제가 올린 파일명은 file.xml 이라고 되어 있군요..

열면

<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
 
<trackList>
<track>
 <annotation>1 - 제목</annotation>
<location>mp3주소</location></track>
<track>
 <annotation>2 - 제목</annotation>
<location>mp3주소</location></track>
<track>
 <annotation>3 - 제목</annotation>
<location>mp3주소</location></track>
</playlist>

 

이런 양식이구요,,,

몇곡을 넣든 이 양식대로 복사해서 집어 넣으면 됩니다. 쉽습니다.^^*

 

 

 

사실 이렇게 만들면 요즘 나오는 5버전도 동영상 쪼개서 이쁜 스킨 박아서 플짤 만들 수 있습니다.

리스트에 이미지도 들어가구요..

보통 flv 고화질을 짤라서 만드는데요,,

시간나면 하나 올려 보죠.^^


 

현재 카페에 들어오면  음악이 나오는데

모든  음악은   돈을  지불해서  그 음악을  카페에  달수 있도록 되어 있는데

조금  변형해서   돈은   지불하지  않고  

자신의  컴퓨터에 있는  mp3를  가지고   음악을  다는 방법으로

조금   복잡한 과정일지  모르지만    한번  연습삼아서  음악 달아보기를 해보길 바람.

 

  

 

 













































 -->

위 소스는 게시판에도 음악이 나오는 소스이니 음악을 끌때에는 "Esc" 눌러 주면 됩니다. 참고로 음악 여러곡 나오게 하고 싶다면 메모장 열고 1번 음악주소 2번 음악주소 3번 음악주소 4번 음악주소 . . . . . 메모장 안에는 1번,2번,3번 이런 글은 안 들어 갑니다 오로지 음악 주소만 작성해서 쓰세요... 알기쉽게 음악 나오는 순서 적어 드린 것 입니다 위처럼 아까 그림에서 보듯 음악 주소만 한줄한줄 적습니다 다른 테그나 이런거 사용 하지 마시고 오로지 음악 주소만.... 다 적었으면 다른 이름으로 저장 클릭 파일이름.asx 위처럼 이름주고 뒤에 꼭 .asx 로 저장 하기 바랍니다 그러면 또 하나의 음악 파일 완성?습니다 그럼 다시 위 그림처럼 .asx 파일 게시판에 올리시고 주소 알아내서 복사한 다음 위 소스 이용해서 사용 하면 몇곡이고 계속 음악을 들려줄 수 있습니다...

 

 

 

  카페의 대문에 태그로 음악올리기| 태그연습

 

 

유투브 동영상 재생 옵션.. 

 

유튜브 재생 소스 HTML에 있는 옵션의 뜻을 이해하면 유용하게 사용할수 있습니다.

1. 기본값이란 특별히 옵션을 설정해두지 않아도 자동으로 설정되어 있는 값을 뜻합니다.

2. 옵션값들은 반드시 "소문자" 로 작성해주세요. 그렇지 않으면 작동하지 않습니다.

 

사용방법 

 반드시 앞에 &를 넣고 띄어쓰기 없이 사용함

예시 : src=" " 중 " " 안에서는 띄어쓰기를 하지 안음.

<embed src="//www.youtube.com/v/up-Xz5xJymM?hl=ko_KR&amp;version=3&rel=0&autoplay=1"

위 동영상 소스 html을 보면

up-Xz5xJymM 는 동영상 고유의 주소이고

?hl=ko_KR&amp;version=3 는 기본적으로 제공되며(version=3를 version2로 바꿀수는 있음)

&rel=0&autoplay=1  옵션으로서  그뜻은

앞의 &rel=0(동영상 재생 완료후 관련동영상(related videos)을 뜨지않게, 만약 0 대신에 1 을 쓰면 관련동영상이 뜨고 )

뒤의&autoplay=1(자동으로 재생되게, 1대신에 0을 넣르면 수동 재생 됨)

따라서 이 동영상은 version3를 사용하고, 처음에 삼각형 바(수동재생 바)  없이 자동 재생되며, 프레이가 끝나고 나서는 관련 동영상이 뜨지 않게 해 놓은 것입니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

◆ 기타 재생옵션과 내용 

<!--[if !supportEmptyParas]--> <!--[endif]-->

&autohide=1 (이 환경에서 지원됨 : AS3,AS2,HTML5)

기본값 : 1

옵션값 : 0

플레이어에 마우스를 올려놓지 않았을 때 시간이 지나면 자동으로 재생바와 제목바를 숨겨줌

<!--[if !supportEmptyParas]--> <!--[endif]-->

&autoplay=0 (이 환경에서 지원됨 : AS3,AS2,HTML5)

기본값 : 0 -수동재생

옵션값 : 1

동영상을 사용자가 재생시키지 않아도 자동으로 재생되게끔 합니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&cc_load_policy=0 (이 환경에서 지원됨 : AS3,AS2)

기본값 : 0

옵션값 : 1

만일 유튜브 자막옵션이 지원되는 경우 옵션값인 "1"로 설정해두면 재생 시 자동으로 자막옵션이 켜져서 같이 나오게 됩니다.

기본값은 자동으로 나오지 않게 되어있지만 사용자가 자막버튼으로 켜고 끌 수는 있습니다.

&color=red (이 환경에서 지원됨 : AS3,HTML5)

기본값 : red

옵션값 : white

재생막대바의 색상을 지정합니다. 일반적으로 기본값인 red가 가장 많이 쓰이긴 하지만 white로 바꿔 줄 경우

재생막대바 색상이 붉은색에서 흰색으로 나오게 됩니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&controls=1 (이 환경에서 지원됨 : AS3,HTML5)

기본값 : 1

옵션값 : 0 또는 2

0 = 플레이어의 재생바를 감춰버립니다. 이것은 autohide 옵션과 달리 영구적으로 감춰버리기 때문에 동영상을 보는 사람들이 마우스로 재생지점을 설정할 수 없게 됩니다.

하지만 특별히 키보드사용설정을 막지 않았다면 방향키로는 탐색지점을 움직일 수 있습니다.

1 = 특별히 이 옵션을 지정하지 않았다면 "1" 수치가 기본값으로 지정됩니다.

재생바를 보여주고 재생버튼을 누르는 그 순간부터 실시간으로 동영상 데이터를 미리 받아와서 끊김없이 감상할 수 있게 해줍니다. 동영상을 잠시 정지해놓고 있어도 데이터는 계속해서 받아옵니다.

2 = 재생바를 보여준다는점은 1과 비슷하지만 이 옵션은 데이터를 오로지 동영상이 재생중일때만 미리 받아옵니다.

일지정지를 시키게 되면 데이터를 미리받아오지 않기때문에 영상을 받아오는 속도가 늦는다면 계속해서 버퍼링이 걸리게 됩니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&disablekb=0 (이 환경에서 지원됨 : AS3,AS2)

기본값 : 0

옵션값 : 1

옵션값인 1 로 지정할 경우 플레이어에서 키보드를 사용할 수 없게 됩니다.

유튜브 플레이어에서 작동하는 키 값은 아래와 같습니다.

스페이스바 : 재생 / 일지정지

오른쪽 방향키 : 총 영상길이의 10%만큼 앞으로

 쪽 방향키 : 총 영상길이의 10%만큼 뒤로

 쪽 방향키 : 볼륨 키우기

아래쪽 방향키 : 볼륨 줄이기

<!--[if !supportEmptyParas]--> <!--[endif]-->

&start=0 (이 환경에서 지원됨 : AS3,AS2,HTML5)

. 기본값 : 없음

옵션값 : 사용자지정

동영상의 시작지점을 정할 수 있습니다. 단위는 "" 이며 만일 50으로 지정할 경우 동영상의 50초 부분에서부터 시작합니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&end=0 (이 환경에서 지원됨 : AS3)

기본값 : 없음

옵션값 : 사용자지정

동영상의 끝 지점을 정할 수 있습니다. 단위는 "" 이며 만일 15로 지정할 경우 동영상의 15초 부분에서 재생이 끝나게 됩니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&fs=1 (이 환경에서 지원됨 : AS3,AS2)

기본값 : 1

옵션값 : 0

풀스크린 버튼을 재생바에 표시합니다. 옵션값을 0으로 줄 경우 재생바에 전체화면 버튼이 사라집니다.

version2 에서는 Fullscreen 버튼이 기본적으로 제공되지 않으므로 &fs=1 을 넣어주면 재생바에 Fullscreen 버튼이 생깁니다.

예시 :  version=3&rel=0&autoplay=1" version=2&rel=0&autoplay=1&fs=1"

<!--[if !supportEmptyParas]--> <!--[endif]-->

&iv_load_policy (이 환경에서 지원됨 : AS3,AS2,HTML5)

기본값 : 1

옵션값 : 3

동영상 진행되는도중 화면에 영상주석들이 주렁주렁 보이는게 싫다면 옵션값 3으로 설정하세요.

기본값은 1로 영상주석들이 보입니다. 하지만 강좌 동영상의 경우 영상의 자체자막이 아닌 유투브 주석을 이용하는 경우도 있으므로 꺼두면 안될때도 있긴하죠.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&loop=0 (이 환경에서 지원됨 : AS3,HTML5)

기본값 : 0

옵션값 : 사용자가 원하는 숫자

동영상이 끝난 후 지정된 횟수만큼 반복되게 합니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&rel=1(이 환경에서 지원됨 : AS3,HTML5)

기본값 : 1

옵션값 : 0

동영상이 끝난 후 관련 동영상(related videos) 목록들이 뜨게 할지 안할지 지정합니다.

기본적으로는 뜨게 되지만 0으로 지정할 시 안뜨게 됩니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&showinfo=1(이 환경에서 지원됨 : AS3,AS2,HTML5)

기본값 : 1

옵션값 : 0

동영상이 시작되기전에 동영상의 제목이나 업로더 이름등이 노출되지 않도록 합니다.

기본값은 1로 노출이 되지만 0으로 설정할 시 단순히 동영상 썸네일만 보이며 정보는 노출되지 않습니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&theme=dark(이 환경에서 지원됨 : AS3,AS2,HTML5)

기본값 : dark

옵션값 : light

유튜브 동영상의 테마색상을 지정합니다.

아직은 JW플레이어처럼 다양한 스킨들을 지원하지는 않고 단순히 색깔만 바꾸는 정도입니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

&ps=blogger (이 환경에서 지원됨 : AS3,AS2,HTML5)

이 옵션을 사용하면 재생바에 유튜브 링크 버튼을 없애버립니다.

원래 이 버튼을 누르면 해당 동영상을 유튜브 사이트에서 볼 수 있고 영상의 출처도 쉽게 찾을 수 있지만 만일 이 옵션을 사용하게 되면 유튜브로 보기 버튼이 사라져버리기 때문에 쉽게 영상의 출처를 찾을 수 없고 반드시 "소스보기" 메뉴를 통해 추적해야 합니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

&modestbranding=1 (이 환경에서 지원됨 : AS3,AS2,HTML5)

바로 위 &ps=blogger와 완벽하게 똑같은 옵션입니다. 만일 위 옵션이 먹히지 않는다면 이 옵션을 사용해보세요!

이 옵션과 color 문장과는 서로 호환이 안되기 때문에 같이 사용하게 되면 이 옵션이 작동하지 않습니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

width="300" height="25"

플레이어의 가로,세로 크기를 지정할 수 있습니다.

이 옵션은 앞에 "&"가 붙지 않습니다. 최종적으로 &옵션을 지정한다음에 한칸띄고 작성해주시면 됩니다.

참고로 가로300,세로25의 크기를 지정하면  영상이 보이지 않는 음악플레이어를 만들 수 있게 됩니다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

<이상 옮겨 온 글>.