JW Player 5 - HTML5(아이폰, 아이패드) 에서의 playlist

JW Player는 기본적으로 플래시에 기반을 둔 플레이어이기 때문에 정상적인 방법으로는 플래시를 극도로 싫어해서 지원하지 않는 애플의 아이폰과 아이패드에서는 영상을 플레이 시킬 수가 없습니다.. 따라서 아이폰과 아이패드를 지원하기 위해서는 HTML5에서 제공하는 기본 태그를 사용해야 하는데 JW Player에서는 이를 Embedder 방식으로 지원을 하고 있습니다.

문제는 이렇게 HTML5의 태그를 기반으로 하면 기존의 playlist 파일들이 먹지 않습니다. longtailvideo.com의 홈페이지에 보면 RSS, Media 방식의 playlist 파일들은 HTML5를 지원 한다고 합니다만, 크롬 15를 기준으로 테스트를 해 보니 playlist 파일을 불러들였을 때에는 정상적으로 실행이 되지 않았습니다.. 그럼 아이패드나 아이폰등을 기반으로 한 device에서는 playlist에 기반을 둔 동영상은 보지 못하는 것일까요???

그렇지는 않은 것 같습니다.. JW Player는 Embedder 방식으로 플레이 리스트까지 자바스크립트로 처리할 수 있는 기능을 제공합니다.. 플레이 리스트 파일을 외부에서 불러오지 않고 자바 스크립트로 처리를 하면 만들 수 있습니다...

<script type='text/javascript' src='http://dl.dropboxusercontent.com/u/25802134/jw5/jwplayer.js'></script>

<p id="embedder" align="center">Loading the player ...</p>

<script type="text/javascript">
jwplayer("embedder").setup({
    'modes': [{ type: 'html5' }],
    'skin': "http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.xml",
    'playlist.position': 'bottom',
    'controlbar': 'over',
    'repeat': 'list',
    'width': 630,
    'height': 640,
    'playlist.size': 144,
   'playlist': [
        {
           'file': 'http://www.youtube.com/watch?v=IUa8ltc_krU',
           'title': '숫자송',
           'description': 'Entoi의 숫자송'
        },
        {
           'file': 'http://www.youtube.com/watch?v=sNFqHeU6YOw',
           'title': '원츄송',
           'description': 'Entoi의 원츄송'
        },
        {
           'file': 'http://www.youtube.com/watch?v=XTVRWrGUCLY',
           'title': '가나다송',
           'description': 'Entoi의 가나다송'
        },
        {
           'file': 'http://www.youtube.com/watch?v=VIJdF_UHfhk',
           'title': '감기송',
           'description': 'Entoi의 감기송'
        },
        {
           'file': 'http://www.youtube.com/watch?v=bBnwQkHd6FY',
           'title': '에그송',
           'description': 'Entoi의 에그송'
        },
        {
           'file': 'http://www.youtube.com/watch?v=qfZQnfEsBvw',
           'title': '캐롤송',
           'description': 'Entoi의 캐롤송'
        },
        {
           'file': 'http://www.youtube.com/watch?v=TNzx2dr-ClQ',
           'title': '스타송',
           'description': 'Entoi의 스타송'
        }
    ]
  });
</script>

Loading the player ...

 

 

일단 제일 중요한 것이, HTML5는 자바 스크립트로 지원을 한다는 것입니다. embedder 방식은 전체를 자바 스크립트로 컨트롤을 합니다. 따라서 자바 스크립트의 사용이 제한되어 있는 곳에서는 JW Player를 이용해서는 HTML5를 지원할 수 없습니다. 당연히 아이패드나 아이폰을 지원할 수 없겠지요.

 

 

이제 위의 소스에서 몇 가지 설명을 해야 하겠군요...

mode : JW Player는 세 가지 모드를 지원을 합니다. HTML5, Flash, 그리고 download. 이 세가지 중에서 어느 것을 우선적으로 적용을 할 것인가를 선택하는 창입니다.

Default는 Flash, HTML5, 그리고 다운로드랍니다.. 먼저 Flash 플레이어를 먼저 시도해 보고, 그게 안 되면 HTML5 방식으로 시도를 하고 그것도 안 되면 해당 파일을 다운로드 시킨다는 것입니다.

이 포스트에서는 HTML5 방식에서의 playlist를 테스트 해 볼 것이니만큼 HTML5를 제일 위에 놓겠습니다..

다음 playlist.position은 다른 방식에서의 playlist와 같습니다. playlist를 화면의 어디에 위치 시킬 것인지를 정하는 것입니다.. HTML5 에서는 playlist대신 playlist.position 이라는 이름으로 사용합니다.

playlist.size는 다른 방식에서의 playlistsize와 같습니다. 전체 화면에서 playlist에 어느 정도의 크기를 할당할 것인가를 결정합니다. HTML5에서는 playlistsize가 아닌 playlist.size라는 이름을 사용합니다.

그 다음은 실제 playlist를 정의하는 부분입니다. 먼저 playlist 로 시작을 합니다.. playlist 전체는 큰 괄호문자 '[' 로 시작을 하고 또 대괄호 문자 ']'로 끝맺게 됩니다. 그리고 각각의 playlist 아이템들은 중괄호 '{' 문자로 시작을 하고 또 중괄호 문자 '}'고 끝을 맺게 됩니다.

중 괄호 안의 file에는 자신이 플레이 하고자 하는 파일의 주소를 넣어주시고, title에는 이름을, description에는 설명을 각각 넣어주면 됩니다.

그리고 중요한 것이 마지막이 되기 전에는 반드시 각 요소 요소를 컴마 ',' 로 구분을 해 주어야 합니다.

이렇게 하면 HTML5에서도 아쉬운대로 playlist를 사용할 수 있게 됩니다.

 

 

 

기타 몇 가지 HTML5를 사용했을때의 제한 사항들을 나열해 보겠습니다.

1. Zip파일 형식의 스킨을 지원하지 않습니다.

2. repeat 을 지원하지 않습니다. 한 파일의 플레이가 끝나면 그냥 거기서 멈춰서 있습니다.

3. controlbar를 지원하지 않습니다. 따라서 컨트롤바가 항상 화면의 밑에 위치합니다.

 

관련 사이트들

JW Player의 HTML5, Flash, Download 우선순위 정하기
HTML5에서의 JW Player playlist 만들기
HTML5를 지원하는 Playlist 포맷 (테스트 결과 크롬에서는 적용되지 않았음)