jwplayer 5.2 사용법(HTML5 지원)

   

jwplayer는 웹용 동영상 플레이어입니다.

youtube같이 재생되도록 붙일 수 있는 녀석이죠.

자주 쓰는 방식으로는 xml로 묶어서 티스토리처럼 용량 무제한인 블로그에 첨부시킨 파일을 이용해서 10메가 단위로 영상을 이어붙이기도 합니다. 때로는 파일호스팅을 이용해서 재생시키기도 하는 데 쓰이기도 합니다.

쓸만한 파일호스팅 소개

그런데 최근에 이 jwplayer가 버전6로 업데이트 되었습니다.

유료버전일 경우 이야기가 달라집니다만, 무료버전의 경우 jwplayer 마크가 계속해서 남아있게 됩니다.

거기다 반복재생도 생각보다 원활치 않고 커스터마이징 하기도 꽤 제한이 많아졌습니다.

여전히 5.2버전이 낫더군요. HTML5 지원도 하기 때문에 모바일에서도 사용가능합니다.

가장 간단한 사용법만 알려드리겠습니다.

jwplayer 5.2.zip

받아보면 js 파일과 swf 파일이 있습니다.

이걸 서버에 올려서 주소를 얻던가, 그것이 없다면 블로그 등에 첨부파일 등록을 합니다.

티스토리의 경우, 비공개글을 하나 만들어서 첨부파일을 본문에 표시 시키고 미리보기한 후에 마우스 오른쪽버튼으로 파일 주소를 얻어냅니다. 동영상이나 이미지도 이와 같은 방식으로 주소를 얻습니다.

<div>

<script type="text/javascript" src="js파일의 주소"></script>

<div id="플레이어 이름">플레이어 불러오는 중...</div>

<script type="text/javascript">

jwplayer('플레이어 이름').setup({

'flashplayer': 'swf파일의 주소',

'file': '파일주소',

'image': '섬네일이미지주소',

'title': '제목',

'description': '설명',

'frontcolor': '기본색',

'lightcolor': '강조색',

'playlistsize': '60',

'playlist': 'bottom',

'controlbar': 'bottom',

'width': '640',

'height': '444',

'repeat': 'always',

'allowmenu': 'false'

});

</script>

</div>

그 다음 위의 태그를 HTML 입력을 활성화시킨 다음 집어넣습니다.

그러면 위지윅에디터에서는 플레이어 불러오는 중... 이란 글씨만 보입니다. 이거면 완료되었습니다만, 실제로 표시되지는 않습니다.

여기서 티스토리만의 팁은 새 글을 불러내서 제목 오른쪽의 서식을 활성화시킵니다.

서식글을 써두는 건데 이쪽은 따로 검색해주시거나 다른 글을 쓸 경우 여기에 갱신시키겠습니다.

우선 두꺼운 글씨의 플레이어 이름은 영어나 숫자로 공백없이 써주시면 됩니다.

이게 왜 필요하냐면 같은 게시글에 영상을 여러개 올릴 경우 중복되면 하나도 재생되지 않기 떄문입니다.

붉은 부분을 주로 바꿔주시면 되겠습니다.

js파일, swf파일 주소를 넣으면 플레이어는 표시됩니다. 그러나 파일이 없다는 오류가 뜰 것이고

file과 image 부분에 주소를 넣으면 이것만으로 재생이 됩니다.

그 외에도 여러 설정이 있지만, 이미 최신버전이 아니라 wizard는 사용할 수 없을 겁니다.

제목과 설명은 한국어로도 입력가능하기 때문에 상관없지만,

기본색과 강조색은 RGB로 입력해야 합니다.

티스토리나 다른 블로그 등의 입력기에서 색깔을 선택하다보면 #660099 같은 숫자가 있습니다. 그 중 숫자만 넣어주시면 플레이어 설정은 끝납니다.

폭 640, 높이 444 픽셀이고, 플레이리스트 높이는 60픽셀입니다.

자동으로 재생되고 메뉴버튼은 안 뜨는 설정입니다.

플레이어 불러오는 중...

위처럼 표시되면 끝입니다.

이 플레이어는 최신버전이 아니라 폭 지정을 해버리면 모바일 뷰어에서는 폭맞춤이 되지 않는 단점이 있습니다.

3G 데이터든 LTE든 데이터가 소중하기 때문에 경고는 미리 해두시는 게 좋을 것 같아요.

장점이라고 한다면 jwplayer 섬네일이 처음 몇초만 표시된다는 점. 무료 라이센스 그대로 했을 때 가장 괜찮은 설정이더군요.

버전 6이 쾌적해지기는 커녕 오히려 조금씩 불편해지고 괜시리 모양이 완전히 바뀌어서 짜증나서 올립니다.

이게 가장 제 마음에 들어서요.

기회가 된다면 다음번에 xml 플레이리스트 작성방법 등을 써보겠습니다.