왕초보를 위한 플짤만들기 2편 ( jwplayer 목록형 플레이어 만들기)

카라 도쿄돔 솔로무대로 만들어 본 플레이어입니다

위 영상의 태그는 아래와 같습니다
 

<embed src="http://cfs.tistory.com/custom/blog/104/1044374/skin/images/player5.7.swf?"

allowfullscreen="true" type="application/x-shockwave-flash" width="960" height="865"

flashvars="playlistfile=http://cfs.tistory.com/custom/blog/104/1044374/skin/images/kata%20tokyo%20dome%20solo.xml?

&amp;playlistsize=300&amp;playlist=bottom

&amp;menu=false&amp;repeat=list&amp;icons=false&amp;type=video

&amp;backcolor=000000&amp;frontcolor=#FBBEA1&amp;lightcolor= #ADDFFF

&logo.file=http://i.imgur.com/D9Ev7HD.png

&logo.position=upper-right&logo.hide=false">

 태그에 대한 설명을 하자면, 1편 플짤 만들기에서 했던 것처럼

<embed src="플레이어주소"  width="가로크기" height="세로크기 "  flashvars="명령어&명령어" > 형태인데..

일단  https://docs.google.com/uc?authuser=0&id=0B2VC_0WKFbt0TmhodEx2bW43VWs&export=download  에서

다운받은 player.swf.jpg  요파일을 .jpg 지우고 티스토리나 드랍박스에 올려 주소를 땁니다

1편에서 구글드라이브에 올려 주소를 땃는데 다시 티스토리에 올리는 이유는 크로스도메인? 정책때문입니다

자세히는 저두 잘 모르므로 설명은 패스...^^:: 

 결론적으로 플레이어와 xml 파일은 같은 도메인에 올려야 재생이 된다는 야그입니다

그런데 얼마 전에 구글에서 xml파일을 막아버렸습니다..이외 config 파일이나 자막링크 파일까지 막아버렸습니다

영상을 드라이브에 올려 주소를따서  링크시키는 것 빼고는 다 막아버렸다고 보시면 됩니다

티스토리 계정 없으신 분은 제게 쪽지로 메일주소 주시면 초대장 보내드립니다

10장 정도 보유하고 있으니 선착순으로?? 보내드립니다 (10명 이상 올리가 없겠지만~~흐)

드랍박스 사용자는 거기에 올려도 됩니다

아래 그림에서 처럼 티스토리관리에 들어가 파일업로드에서 추가누르고 플레이어를 업로드하고 

업로드된 파일을 우클릭 링크주소복사 해서 태그에 붙여넣으면 됨..
 
 

flashvars속성을 보면 목록형플레이어에서는 file 대신에 playlistfile을 씁니다 

playlistsize는 하나의 크기가 60 픽셀입니다..위영상에서는 리스트가 5개이므로 300

playlist 는, 가로영상은 밑에 (bottom),세로영상은 우측에 (right) 해주는게 보통입니다

그래서 세로크기는 영상화면이 540 + 리스트 300 + 재생바 25 해서  865 가 되고

리스트를 우측에 붙이면 가로영상에 리스트크기를 더해주면 됩니당~

repeat =list는 첫번째 영상부터 마지막 영상까지 재생한후 멈추는 명령어입니다

나머지는 1편에서 설명한 그대로이니 생략..^^;;

그럼 이제 플레이리스트파일(xml)을 만드는 방법입니다

<playlist xmlns="http://xspf.org/ns/0/" version="1">

<tracklist>

<track>

<title>승연 Strong Enough</title>

<annotation>카라 도쿄돔 솔로무대 모음</annotation>

<location>

http://www.googledrive.com/host/0B2VC_0WKFbt0UmhENDJNWGJBSVE

</location>

<image>

http://i.imgur.com/D68ziAu.jpg

</image>

<meta rel="type">video</meta>

</track>

<track>

<title>하라 I Love Rock'n Roll</title>

<annotation>카라 도쿄돔 솔로무대 모음</annotation>

<location>

http://www.googledrive.com/host/0B2VC_0WKFbt0SnBBNWU1QmV1XzQ

</location>

<image>

http://i.imgur.com/6X4FMb2.jpg

</image>

<meta rel="type">video</meta>

</track>

<track>

<title>니콜 Humpin' Around</title>

<annotation>카라 도쿄돔 솔로무대 모음</annotation>

<location>

http://www.googledrive.com/host/0B2VC_0WKFbt0NE13Zk9zMXNyV2M

</location>

<image>

http://i.imgur.com/NmCVdVo.jpg

</image>

<meta rel="type">video</meta>

</track>

<track>

<title>규리 Daydream</title>

<annotation>카라 도쿄돔 솔로무대 모음</annotation>

<location>

http://www.googledrive.com/host/0B2VC_0WKFbt0cG1JOEI0UzItQjQ

</location>

<image>

http://i.imgur.com/dv2zQLZ.jpg

</image>

<meta rel="type">video</meta>

</track>

<track>

<title>지영 학원천국</title>

<annotation>카라 도쿄돔 솔로무대 모음</annotation>

<location>

http://www.googledrive.com/host/0B2VC_0WKFbt0ZEsyZGk0c194bU0

</location>

<image>

http://i.imgur.com/gh2xHph.jpg

</image>

<meta rel="type">video</meta>

</track>

</tracklist>

</playlist>

위 내용을 복사해 메모장에 붙여놓고  내용 수정하면 됨

영상하고 파일하고 비교해보면 감이오죠??!!

리스트 갯수가 모자란다면 <track> ~~</track>까지를 복사해 원하는 만큼 추가하면 됨..

수정이 끝나면 메모장의 파일-다른이름으로 저장

파일명은 가급적 영어나 숫자로 짧게,확장자는 반드시.xml 으로  인코딩은 UTF-8 로 해서

위와 같이 티스토리 스킨에 업로드해서 링크주소  따서 playlistfile=여기에 붙여넣으면 됩니다

1편과 마찬가지로 완성된 태그를 복사해 게시판 글쓰기 플래시 아이콘 눌러 창에 붙여넣기 하면 끝!!!

요기 까지가 목록형플레이어 만드는 방법이었습니다..넘 쉽죠~~ㅎ

시간되는대로 3편에서는 목록형 플레이어 플러긴 과 jwplayer 스킨소개및 적용방법

목록형 오디오 플레이어 만들기등을 쓸 예정입니다..기대하셔여~~ㅎ

대충 요렇게...^^