Jwplayer Guide
Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전까지 나왔으며 편리함을 위해서 아래를 링크를 걸어둡니다 [다운로드] http://www.gawoo.net/jwplay/jwplayer5.1.zip 1. 설치하기 다운로드한 파일을 열어보면 파일들이 6개 있는데 필요한건 아래의 4개 파일 player.swf swfobject.js yt.swf video yt.swf는 5.1에 새로 추가되었는데 홈페이지 설명으로 Youtube 동영상 지원을 위해서 필요하다고 하고, 위 4개의 파일을 외부에 링크가능한 서버에 서로 같은 디렉토리에 올리셔야 됩니다. 2. 웹에서 사용하기 JWplayer는 embed 태그를 쓰면 쉽게 사용할 수 있습니다. 홈페이지에서 Setup Wizard를 제공하고 있습니다. 4버전 Setup Wizard : http://www.longtailvideo.com/support/jw-player-setup-wizard-4 5버전[최신버전] Setup Wizard : http://www.longtailvideo.com/support/jw-player-setup-wizard
[참고]5버전에서 로고를 사용하기 위해서는 라이센스 버전을 사용하여야 합니다.
요렇게 뜹니다. 2. Change Your Flashvars에서 사용자가 필요한 항목을 넣고 Update Preview & Code 누르면 3. Preview 와 4. Copy your Coce* HTML코드가 자동으로 만들어지고 HTML코드를 복사해서 붙여넣기하면 끝입니다. 2. Change Your Flashvars 필수로 필요한 항목을 보겠습니다. -Embed Parameters - source 에는 자신이 서버에 업로드한 플레이어.swf의 링크를 넣습니다. height 와 width는 동영상의 크기에 맞게 적어주시거나 표시하고자하는 웹페이지의 크기에 맞게 적어주세요. 가장 중요한 file입니다. 자신이 올린 동영상의 주소를 입력하시면 됩니다 -Layout - controlbar(재생버튼과 음량표시 같은거)는 controlbar가 화면에 나타날 위치 (위, 아래, 없음, 사라짐)를 정할 수 있습니다
controlbar bottom(아래), top(위), over(사라짐), none(없음) [참고]bottom이나 top으로 지정할때는 player의 세로길이 즉, height에 controlbar의 길이 까지 포함시켜야합니다 playlist (none): 플레이 리스트의 위치를 지정합니다.bottom, top, over, right, none. playlistsize (180): 플레이 리스트의 사이즈 입니다. [참고]플레이 리스트 사이즈 만큼 플레이어의 크기도 늘어나야합니다. 다시 말해서 플레이 리스트가 bottom이면 height가 playlistsize만큼 늘어나야 한다는 이야기지. 원래 플레이어의 크기가 640 x 360 이고 플레이어 리스트의 사이즈가 180면 플레이어의 크기는 640 x 540으로 지정해야 된다는 이야기 입니다. dock (false): set this to true to show the dock with large buttons in the top right of the player. Available since 4.5. 설명으로는 true로 설정하면 오른쪽위에 큰 버튼이 생긴다는데 설정해봐도 안나오네요 무엇에 쓰는지 잘 모르겠습니다 skin (undefined): 스킨의 주소입니다. Layout에 skin은 Jwplayer 에 스킨을 입힐 수 있게 해줍니다. 스킨 페이지 : http://www.longtailvideo.com/addons/skins 가셔서 자신이 원하는 스킨을 찾아 플레이어 설치하듯 설치해주세요. 없으면 그냥 기본으로 제공 하는 스킨 (jwplayer버전에 따라 적용할 수 있는 스킨이 있습니다. 자신의 버전에 맞는 스킨을 쓰세요) [참고]버전 5를 받으셨다면 zip파일로된 스킨을 받으셨으면 그냥 그대로 서버에 올리시고 zip 파일의 링크를 태그에 적으시면 됩니다. [예제] http://gawoo.net/jwplay/rana.zip 5버전에서만 가능함 그럼 이제 Update Preview & Code눌러서 Preview와 HTML코드를 생성합니다. 처음에는 HTML코드가 자바스크립트로 나옵니다. 우리에게 익숙한 EMBED태그로 바꾸기 위해서는 코드 박스 상단 오른쪽에 the embed code 를 누르시면 됩니다.
보시면 불필요한 object태그와 parameter태그들이 있습니다. 게시판에 따라서 저런 태그들을 지원하는곳도 있고 지원하지 않는곳도 있습니다. 우리가 필요한 부분은 EMBED태그 부분입니다. 저부분만 있으면 플레이 시키는데 문제 없습니다. 밑에서 두번째줄 flashvars 부분을 보시면 '&' 로 이어진 부분이 있습니다. 저렇게해서 동영상 재생에 필요한 옵션(playlist, 버튼표시유무, 스킨등)을 하나하나씩 넣는겁니다. 물론 Setup Wizard에서 다 알아서 해줍니다. Setup Wizard를 하나씩 설정해보시고 자신만의 설정을 만들어보세요. 3. 예제 보기
[참고] flashvars='file=http://gawoo.net/jwplay/test.flv&skin=http://gawoo.net/jwplay/rana. zip&autostart=true&controlbar=over'/> 혹은 자동으로 시작하고 싶을때는 &autostart=true 를, 계속해서 반복 재생하고 싶을때는 &repeat=always 를 뒤에 붙이시면 됩니다. 위의 예제와 같이 EMBED 태그를 메모장에 만들어두고 필요할때마다 동영상 주소나 크기 등만 바꿔서 게시판에 붙여넣기하시면 편하실껍니다. [참고]홈페이지 붙여쓸때 <embed type='application/x-shockwave-flash' <embedtype='application/x-shockwave-flash' <-- 발생될수있음 [ 스킨 비교 ] 스킨을 다운받아서 이렇게 스킨을 변경할수있다.
4. JWPlayer 명령어 http://developer.longtailvideo.com/trac/wiki/player5flashvars 에 나와있는대로 설명해드릴께요. 5버전 기준 괄호() 안에있는 것이 defalut값입니다. 따로지정하지 않으면 default값이 적용됩니다. backcolor (undefined): controlbar 와 playlist의 background color를 지정합니다. frontcolor (undefined): controlbar와 playlist의 아이콘과 텍스트의 색깔을 지정합니다. Lightcolor (undefined): 마우스오버가 되면 아이콘과 텍스트가 바뀌는 색깔을 지정합니다. screencolor (undefined): 플레이어의 바탕 색깔입니다. [참고]swf(ver1.0)로된 스킨만 적용이 됩니다. zip(ver2.0)으로된 스킨은 zip안에있는 이미지를 그대로 보여주는지 안되더군요. -behaviour - autostart (false): 자동실행 여부를 설정합니다. 플레이어가 로드되자마자 플레이 시키고 싶으시면 autostart=true bufferlength : 버퍼링 시간을 설정할 수 있습니다. bufferlength(10)으로 설정하면 동영상이 로드되고 10초간의 버퍼링 시간을 갖습니다. 다시말해서 설정한 시간만큼 동영상을 다운 받고 시작하는거죠. icons (true): 화면중간에 나오는 재생버튼이나 버퍼링 아이콘의 표시 유무를 지정합니다. false로 하면 안나옵니다. Item (0): 이건 플레이 리스트일때 쓰입니다. 플레이를 시킬 동영상의 번호를 입력하면 그 번호부터 시작합니다. [참고] 동영상의 순서는 0부터 시작합니다. 즉, 3번째 동영상을 플레이 시키기위해서는 item=2를 설정해야합니다. mute (false): 음소거 입니다. repeat (none): 반복재생에 관한 설정입니다. repeat=list 플레이 리스트를 한번 모두 재생하고 종료합니다. repeat=always 동영상 파일을 무한반복합니다. 플레이리스트도 마찬가지 repeat=single 플레이리스트에서 선택한 동영상 하나를 계속 반복합니다. shuffle (false): 플레이 리스트에 있는 동영상이나 음악을 랜덤으로 재생합니다.
stretching (uniform): 동영상을 플레이어 크기에 맞게 늘이는 옵션입니다. 912 x 512(16:9) 동영상을 640 x 480(4:3)의 플레이어로 재생시키고 옵션을 설정해 보았습니다. 펼쳐서 보세요 volume (90): 볼륨입니다. 0~100까지 설정가능.