JWPlayer 연결 플짤 만드는법

시작하기 앞서 이 강좌는 제가 사용하는 방법이고

기본 플짤중에 이것보다 빠르게 만드는 방법은 없다고 할 수 있습니다

JW플레이어 연결플짤은 처음만 고생하고 성공하면 이 후 부터는

어떤 플짤이라도 5분 이내 만들 수 있습니다(랜더링 시간 제외)

하나하나 천천히 따라하시면 반드시 성공 하실 거에여

가장 처음 단계로는 티스토리 블로그가 필요합니다

http://www.tistory.com/invitation/  << 여기에서 티스토리 초대장을 받을 수 있습니다

다음팟인코더를 다운/설치 합니다

http://tvpot.daum.net/application/PotEncoder.do  << 다음팟인코더 다운로드

▲ 1번 사진

첫번째로 동영상 편집 클릭

두번째 불러오기 눌러서 만들려고 하는 동영상을 불러옴

불러온 동영상을 드래그 해서 아래 타임라인으로 끌어 내림

세번째 환경설정 클릭

이것과 똑같이 설정!

비트레이트는 2500~3000 사이를 추천함

모두 설정했으면 [내 설정 추가]를 눌러서 저장 해놓으면 언제든지 이 설정값을 불러낼수 있습니다

확인 누르시고 [인코딩 시작] 누릅니다 (인코딩 완료되면 1번 사진 아래 저장 폴더 경로에 저장 됩니다)

▲ 랜더링 동영상 설명(완료가 빨리 된건 중간에 녹화를 짤라서 그렇습니다 원래는 오래걸림)

완료가 되시면

 이런식으로 MP4 파일로 나옵니다

티스토리 블로그에는 파일 하나에 10mb 바께 업로드가 안됩니다

Yamb-1.6.exe

다운/설치 하세요

실행하시면 아래 화면처럼 설정하세요

2번 Input을 누르셔서 인코딩했던 영상을 불러오시고

3번처럼 10mb로 설정후

4번 Split 누르세요

이렇게 63mb 짜리가

10mb로 7개로 쪼개졌습니다

이제 이렇게 쪼개진 파일을 mp4 -> flv로 바꿔야 합니다

nzRename_1.5.55(build3)setup.exe

다운/설치 합니다

설치 후 쪼개진 파일을 드래그 후 NZRename 클릭합니다

1번 처럼 확장자에 flv 라고 적으시고

2번 바꾸기 클릭

3번 끝내기 하시면 mp4 -> flv 로 바뀐 파일들을 볼 수 있습니다

이제 flv로 바뀐 파일들을 티스토리 블로그에 올려야합니다

등록을 누르고

1번 HTML 체크

2번 flv 파일만 드래그 / 복사( Ctrl+C )

3번 저장하기 누르시고 아래 자동연결을 다운 실행 하세요

XML_자동연결.exe

다운/실행

1번 자신의 티스토리 주소를 예시 처럼 적는다 (오타나면 안됨)

2번 이전에 복사했던거 붙여넣기

3번 xml 클릭

4번 출력 결과 드래그 / 복사

메모장을 열고 방금 복사한걸 붙여 넣습니다

파일 -> 다른 이름으로 저장 누릅니다

1번 [UTF-8] 설정합니다

2번 [모든 파일] 설정합니다

3번 파일이름.xml (예)abc.xml

설정후 저장하면 확장자가 .xml 파일이 생성됩니다

jwp57.zip

다운/압축해제 합니다

압축 해제 하시면 player.swf 라는 파일이 있습니다

티스토리 블로그로 이동합니다

1번 [HTML/CSS 편집] 클릭

2번 [파일업로드]클릭

3번 [추가]클릭 -> player.swf 업로드를 하면 4번처럼 나옵니다

4번 우클릭 -> 속성 누르시면 http://머시기머시기/skin/images/player.swf?=18108721  이런식으로 URL주소 나옵니다

http://머시기머시기/skin/images/player.swf 까지만 드래그 후 복사합니다

크롬 사용하시는분은 우클릭 ->링크 주소 복사 누르시면 됩니다(크롬유져도 뒤에숫자는 빼셔야합니다)

그리고 조금전에 만들었던 이름.xml 파일도 같이 추가 합니다

이제 코드만 입력하면 끝입니다

연습.txt

<embed src="player주소" width="853" height="480" 

type="application/x-shockwave-flash" allowfullscreen="true" 

flashvars="file=파일이름.xml&controlbar=over&autostart=true&repeat=always">

"player주소" 에는  "http://머시기머시기/skin/images/player.swf" 이런식으로 넣고

file=파일이름.xml 도 xml 주소 넣으시면 됩니다

width 는 화면 가로 길이

height 는 화면 세로 길이입니다

완성본

<embed src=" http://머시기머시기/skin/images/player.swf" width="853" height="480" 

type="application/x-shockwave-flash" allowfullscreen="true" 

flashvars="file http://머시기머시기/skin/images/abc.xml&controlbar=over&autostart=true&repeat=always">

이제 이 완성본을 올리면 됩니다

1번 html 체크후

코드를 넣습니다

그리고 저장 하면 아래와 같이 나오면 성공입니다

이것만 해놓으시면 모든 플짤 5분 안에 제작 가능합니다

JWPlayer 명령어 모음

&controlbar=bottom	컨트롤바의 위치를 하단에 위치
&controlbar=top	컨트롤바의 위치를 상단에 위치
&controlbar=over	영상에 마우스 커서를 올리면 컨트롤바가 나타남  커서가 없을 경우, 시간이 지나면 사라짐
&controlbar=none	컨트롤바를 나타나지 않게 설정
&skin=스킨파일주소	JW플레이어의 스킨을 변경함
&autostart=false	자동재생이 안되도록 설정
&autostart=true	화면이 나타남과 동시에 자동으로 재생 되도록 설정
&repeat=false	동영상을 한바퀴 재생하고 정지
&repeat=list	리스트에 포함된 모든 동영상을 한바퀴 재생하고 정지
&repeat=always	동영상을 계속 자동으로 반복재생
&mute=false	음소거가 없도록 설정
&mute=false	화면은 나오지만 음소거 되도록 설정
&icon=true	화면중앙에 재생 아이콘과 로딩 아이콘이 보이도록 설정
&icon=false	아이콘이 안보이도록 설정
&menu=true	영상 화면을 마우스 오른쪽 버튼으로 클릭하면 메뉴가 보이도록 설정
&menu=false	메뉴가 나타나지 않도록 설정
&stretching=uniform	영상의 비율이 변하지 않도록 설정
&stretching=fill	원본 영상과 플레이어의 크기가 다를 경우, 플레이어의 화면크기에 맞추어 화면이 잘림
&stretching=exactfit	원본 영상과 플레이어의 크기가 다를 경우, 플레이어의 화면크기에 맞추어 화면 크기 변경
&stretching=none	원본 영상과 플레이어의 크기가 다를 경우, 원본 영상의 크기로 재생
&volume=음량(0~100)	플레이어의 음량을 조절할 수 있음
&displayclick=fullscreen	영상 화면을 클릭하면 모니터 화면에 풀스크린으로 나타남
&displayclick=next	영상 화면을 클릭하면 다음 파일로 넘어감
&displayclick=mute	영상 화면을 클릭하면 음소거가 되도록 설정
&displayclick=none	영상 화면을 클릭해도 아무런 일이 없음
&displayclick=링크주소	영상 화면을 클릭하면 삽입한 주소로 이동(새창)
&image=이미지주소	재생하기 전에 플레이어에 보여질 이미지를 삽입
&playlist=none	플레이 리스트가 안보이도록 설정
&playlist=top	플레이 리스트가 화면의 상단에 보이도록 설정
&playlist=bottom	플레이 리스트가 화면의 하단에 보이도록 설정
&playlist=right	플레이 리스트가 화면의 오른쪽에 보이도록 설정
&playlist=left	플레이 리스트가 화면의 왼쪽에 보이도록 설정
&playlist=over	플레이 리스트가 영상 재생전에 보이도록 설정
&playlistsize=숫자	플레이 리스트의 크기를 설정  만약 여기에 200을 입력했다면 기본 태그에서 플레이어의 크기를 +200 해서 입력해야함
&shuffle=false	랜덤 재생 없음
&shuffle=true	플레이 리스트 내에서 랜덤 재생
&logo=로고주소	자신이 올려놓은 로고 이미지를 삽입
&logo.position=bottom-left	로고를 화면 왼쪽 하단에 위치
&logo.position=bottom-right	로고를 화면 오른쪽쪽 하단에 위치
&logo.position=top-left	로고를 화면 왼쪽 상단에 위치
&logo.position=top-right	로고를 화면 오른쪽 상단에 위치

&logo.link=주소    로고누르면 주소지로감