jw-player 간단 소개

jw-player라 웹에서 스트리밍 영상 플레이어로 

쓰이는 것을 많이 봤습니다.

그래서 요 몇일 간 시간 좀 들여서 알아봤습니다.          


위의 바 형태의 플레이어가 jw-player입니다. 

지금은 음원형태라 크기를 줄여놓았습니다.


롱테일이라는 곳에서 서비스하는 것 같군요. http://www.longtailvideo.com/

홈페이지에서 무료로 받으실 수 있습니다. (개인은 무료, 기업체는 유료)


받으신 파일 중에 확장자 swf인 것만 필요합니다.

이 파일을 티스토리 같은 외부링크 허용 사이트에 업로드 한뒤

사용하면 되는데요. 파일을 업로드 한뒤 소스를 긁어보면


cfile10.uf@1960233C4F883BBD153CDB.swf 이런 식으로 나옵니다.

이게 플레이어입니다. 틀이요. 

이것과 실제 영상 두가지가 필요합니다. 


예제


코드를 보면

<embed width="600" height="380" src="http://player.longtailvideo.com/player5.9.swf" type="application/x-shockwave-flash"

&allowfullscreen="true"&flashvars="file=http://insaneness.tistory.com/attachment/cfile23.uf@1718C64C4F85ABCF06855E.mp4

&controlbar=over&skin=http://www.longtailvideo.com/files/skins/schoon/5/schoon.zip">

embed 태그 src= 부분에 플레이어주소가 들어갑니다. 

flashvars="file="" 이부분에는 실제 영상 주소가 들어갑니다.

"file=주소&옵션&옵션" 형식으로 써야 옵션이 제대로 먹힙니다.

 type="application/x-shockwave-flash" 이 코드는

형식이 swf 어플이다라는 것 같은데 정확히는 모르겠습니다.

swf 포맷인 영상에만 쓰는건가.. 

mp4 영상일때 이 코드를 써줘도 별 이상은 없는데

안써줘도 이상이 없습니다;; 


뒷부분에는 여러가지 옵션을 걸어줄 수 있습니다.

jw player  옵션 모음

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

&icons=false 화면과 화면 사이의 버튼 생략


여러 개의 영상 돌리기

xml 파일을 사용해 여러 파일을 재생할 경우, 다음과 같이 xml 파일을 작성하고 file에 동영상 파일 대신 xml 파일 주소를 넣으면 됩니다.

<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <title>전체 제목</title>
    <tracklist>

        <track>
            <title>동영상 파일 제목 1(title)</title>
            <creator>동영상 만든 사람 1(author)</creator>
            <info>동영상 링크 1(link)</info>
            <annotation>동영상 파일 설명 1(description)</annotation>
            <location>동영상 파일 주소 1(file)</location>
        </track>

        <track>
            <title>동영상 파일 제목 2(title)</title>
            <creator>동영상 만든 사람 2(author)</creator>
            <info>동영상 링크 2(link)</info>
            <annotation>동영상 파일 설명 2(description)</annotation>
            <location>동영상 파일 주소 2(file)</location>
        </track>

        <track>
            <title>동영상 파일 제목 3(title)</title>
            <creator>동영상 만든 사람 3(author)</creator>
            <info>동영상 링크 3(link)</info>
            <annotation>동영상 파일 설명 3(description)</annotation>
            <location>동영상 파일 주소 3(file)</location>
        </track>

    </tracklist>
</playlist>


롱테일 홈페이지에 보면 있는 것들.

http://www.longtailvideo.com/addons/skins  

//여러 가지 스킨들이 있습니다. 

//스킨 다운로드 한뒤 zip파일 자체를 웹에 업로드한 뒤,

//태그옵션에 skin="스킨 주소" 써주면 됩니다. 확장자는 zip 

//다운받지 않고 롱테일 홈피에서 바로 링크걸어줘도 됩니다.

//이때는 크로스라이센스로 인해 jw-player도 같은 도메인, 즉 롱테일 홈피에 있는 것을 걸어주어야 

//플레이어가 동작합니다.

http://www.longtailvideo.com/support/jw-player-setup-wizard

//간단하게 태그 생성하기