JW Player 5 - HTML5에서의 playlist.xml과 Skin

흠... JW Player가 HTML5 모드에서는 스킨과 playlist.xml 파일을 불러오지 못 하는 줄 알았다... 그런데 우연히 깨작 깨작 건드려보니 불러와 진다.. 문제는 스킨 파일과 playlist.xml 파일 그리고 html 파일이 모두 같은 도메인 내에 있어야 하는 것이었다.. 이런.... HTML5 모드에서의 실행파일은 player.swf 파일 대신 jsplayer.js 파일이다. 따라서 jsplayer.js 파일이 있는 도메인에 cross domain 정책이 적용이 되어버린다..

참고로 설명을 하자면 현재 playlist.xml 파일과 스킨 파일은 모두 내 Dropbox 계정에 있다. 하지만 플레이를 불러오는 html 파일은 티스토리에 있다.. 지금 이 글이 티스토리에 올라가기 때문이다.. 이런 경우는 실행이 정상적으로 되지 않는다. playlist.xml 파일도 불러와지지 않고 스킨 파일도 불러와 지지 않는다.. 그런데 dropbox에 html 파일을 저장하고 불러왔더니 정상적으로 다 불러와 지더라는...

간단히 HTML5에서 JW Player를 실행하는 방법을 살펴보면 다음과 같다.

 

1. Source

<center><div id='HTML5-WebM'>Loading the player ...</div></center>
<script type="text/javascript">

  jwplayer('HTML5-WebM').setup({
  skin: 'http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/yyht/yyht.zip',
  file:'http://content.bitsontherun.com/videos/bkaovAYt-27m5HpIu.webm'
  width: 720,
  height: 438,
  controlbar: 'bottom',
  plugins: {
    'hd-2': {}
  },
  modes: [{type: 'html5'}]
});
</script>

소스 부분을 보면 flashplayer 부분이 빠지고 대신 modes: [{type: 'html5'}] 부분이 추가된다. 소스는 반드시 JW Embedder 방식을 사용을 해야 한다. SWFObject나 <object><embed> 방식은 HTML5에서는 실행이 될 수 없다.

 

2.Skin

일단 HTML5에서는 flash 스킨은 사용을 할 수가 없다. 당연하다. HTML5는 플래시를 허용하지 않는 iPhone과 iPad를 염두에 두고 만드는 것이기 때문이다. 따라서 HTML5에서는 zip 스킨 파일만을 허용한다. HTML5에서 스킨을 적용을 할 때는 스킨 폴더의 내용이 중요한데, flash 기반의 플레이어와는 달리 HTML5에서는 zip 파일 안의 모든 내용이 풀려 있어야 한다.

flash 기반의 플레이어는 자체적으로 zip 파일을 풀어내는 코드가 내장되어 있다. 그래서 zip 파일을 불러들이고, 그 파일을 적당한 곳에 풀어서 그 안에 있는 내용들을 스킨으로 불러들인다. 하지만 HTML5 방식에서는 자체적으로 zip 파일을 풀어낼 수가 없단다. 그래서 어쩔 수 없이 xml 파일을 비롯한 모든 파일을 전부 불러와야 한단다. 따라서 스킨 파일은 아래와 같이 구성이 되어야 한다.

스킨 파일의 경로에 위와 같이 yyht.zip 파일을 풀어 놓는다 그러면 yyht.xml, controlbar, dock, hd, playlist 파일과 폴더들이 yyht.zip 파일과 같이 있어야 한다. 그러면 자동으로 검색을 해서 xml 파일을 읽어들이고 그 파일에서 정의되어 있는 다른 파일들을 순서대로 읽어들여서 Skin을 뿌리게 된다.

 

3. Playlist

플레이 리스트는 mRSS 방식으로 만들어진 플레이 리스트를 그대로 사용을 하면 된다. 아래는 예제이다.

<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
    <channel>
        <title>Example media RSS playlist with HD</title>

        <item>
            <title>Big Buck Bunny Trailer</title>
            <jwplayer:file>http://content.bitsontherun.com/videos/bkaovAYt-364765.mp4</jwplayer:file>
            <jwplayer:hd.file>http://content.bitsontherun.com/videos/bkaovAYt-364768.mp4</jwplayer:hd.file>
            <jwplayer:type>http</jwplayer:type>
            </item>

        <item>
            <title>Sintel</title>
            <jwplayer:file>http://content.bitsontherun.com/videos/3XnJSIm4-364765.mp4</jwplayer:file>
            <jwplayer:hd.file>http://content.bitsontherun.com/videos/3XnJSIm4-364768.mp4</jwplayer:hd.file>
            <jwplayer:type>http</jwplayer:type>
        </item>

    </channel>
</rss>

 

아래는 dropbox에 저장한 html 파일을 iframe 태그로 불러온 결과물이다.. 속성중에서 scrolling을 no로 하고 style에서 border 영역을 0으로 주었기 때문에 iframe으로 불러온 것 같지는 않다. 어쨋든 밑의 내용은 iframe 태그로 dropbox의 html을 불러다 붙인 것이고 결론은.. 몇 가지 제약은 있지만 HTML5에서도 xml 형식의 playlist 파일과 스킨을 분명히 지원을 한다는 것이다.. iPhone이나 IPad에서도 스킨을 비롯해 playlist.xml 기반으로 내용을 출력할 수 있다.

원본 html 따로 보기