JW Player 5 - HD 화질 동영상 playlist

HD 동영상 플레이 관련 마지막 시리즈입니다. 플레이 리스트를 적용하는 방법을 한 번 보려고 합니다.. 그런데 HD 화질용 playlist는 rss 방식에 jwplayer 확장 방식을 사용을 합니다.. 아래 예제를 한 번 보시죵..

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

        <item>
            <title>The Boys (소녀시대)</title>
            <jwplayer:file>http://www.youtube.com/watch?v=_YFujWZskmY</jwplayer:file>
            <jwplayer:hd.file>http://www.youtube.com/watch?v=_YFujWZskmY&hd=1</jwplayer:hd.file>
        </item> 

        <item>
            <title>Be my baby (원더걸스)</title>
            <jwplayer:file>http://www.youtube.com/watch?v=3fy4cqWMhyI</jwplayer:file>
            <jwplayer:hd.file>http://www.youtube.com/watch?v=3fy4cqWMhyI&hd=1</jwplayer:hd.file>
        </item> 

        <item>
            <title>Girl's Night Out</title>
            <jwplayer:file>http://www.youtube.com/watch?v=AJGZdjVLmbU</jwplayer:file>
            <jwplayer:hd.file>http://www.youtube.com/watch?v=AJGZdjVLmbU&hd=1</jwplayer:hd.file>
        </item> 

        <item>
            <title>Cry Cry (티아라)</title>
            <jwplayer:file>http://www.youtube.com/watch?v=5M69TE1yzt4</jwplayer:file>
            <jwplayer:hd.file>http://www.youtube.com/watch?v=5M69TE1yzt4&hd=1</jwplayer:hd.file>
        </item> 

        <item>
            <title>그댄 정말 모를 거에요 (J-Cera)</title>
            <jwplayer:file>http://www.youtube.com/watch?v=xMz5-eSCc6U</jwplayer:file>
            <jwplayer:hd.file>http://www.youtube.com/watch?v=xMz5-eSCc6U&hd=1</jwplayer:hd.file>
        </item> 

    </channel>
</rss>

playlist와 관련해서는 동영상을 플레이 할 때 해당 동영상을 HD 화질로 플레이를 할지 아니면 보통 화질로 플레이를 할 지에 대한 정보는 JW Player 태그에서 결정하지 않고 playlist에서 결정을 합니다.. 따라서 위와 같이 플레이 리스트에 저화질용 영상의 주소가 HD용 영상의 주소를 같이 적게 됩니다. 헌데 저화질용 영상과 HD용 영상을 구분해주는 구분자가 JWPlayer 확장기능에서만 지원을 하기 때문에 JW Player 확장 기능을 사용을 해서 정의를 합니다..

먼저 xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats" 구문을 넣어주어서 JW Player에게 이 플레이 리스트에서 JWPlayer 확장기능을 사용할 것이라는 사실을 알려줍니다.. 그리고 난 후에 <jwplayer:file>에는 저화질용 영상의 주소를, <jwplayer:hd.file>에는 HD 영상의 주소를 넣어주고 역시 UTF-8 방식으로 저장을 합니다. 그리고는 이 파일을 불러오면 됩니다..

영상 파일은 편의상 그냥 Youtube의 영상을 이용을 했습니다. Youtube의 영상은 사실 JW Player에서 HD 영상을 자체적으로 인식을 하기 때문에 Youtube 영상을 이용해서 playlist를 만들 때에는 구지 HD 용으로 만드실 필요 없이 Youtube 주소의 뒤에 &hd=1 태그만 붙여서 사용을 하시면 됩니다.

이 예제는 Youtube가 아닌 자신의 계정에 HD 영상과 저화질 영상이 올라와 있을 것을 가정하고 진행을 해 보도록 하겠습니다. JW Player의 태그에서는 HD plugin만 정의를 해 주고 저장된 플레이 리스트를 불러오면 됩니다. 아래 예제를 보시도록 하지요.

 

1. <object> 태그를 활용한 예제

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='720' height='524' id='single1' name='single1'>
<param name='movie' value='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='playlistfile=http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist_HD.xml&playlistsize=120&plugins=hd-2&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&controlbar=over&playlist=bottom&repeat=list'>
<embed type='application/x-shockwave-flash'
  id='single2'
  name='single2'
  src='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'
  width='720'
  height='524'
  bgcolor='undefined'
  allowscriptaccess='always'
  allowfullscreen='true'
  wmode='transparent'
  flashvars='playlistfile=http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist_HD.xml&playlistsize=120&plugins=hd-2&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&controlbar=over&playlist=bottom&repeat=list'/>
</object>

플레이 리스트 파일과 아울러 hd plugin을 설정을 해 줍니다. playlist를 이용하기 위해서는 playlistfile, playlist, playlistsize 이렇게 세 개의 항목을 같이 설정을 해 주어야 합니다.

 

 

2. SWFObject를 활용한 예제

<script type='text/javascript' src='http://dl.dropboxusercontent.com/u/25802134/jw5/swfobject.js'></script>
<p id='SWFObject-video'>This text will be replaced</p>
<script type='text/javascript'>
  var so = new SWFObject('http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf','ply','720','524','9','#000000');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('skin','http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip');
  so.addVariable('playlistfile','http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist_HD.xml');
  so.addVariable('playlistsize','120');
  so.addVariable('controlbar','over');
  so.addVariable('repeat','list'); 
  so.addVariable('playlist','bottom');
  so.addVariable('plugins', 'hd-2');
  so.write('SWFObject-video');  
</script>

플레이 리스트 파일과 아울러 hd plugin을 설정을 해 줍니다. playlist를 이용하기 위해서는 playlistfile, playlist, playlistsize 이렇게 세 개의 항목을 같이 설정을 해 주어야 합니다.

 

 

3. JW Embedder를 활용한 예제

<script type="text/javascript" src='http://dl.dropboxusercontent.com/u/25802134/jw5/jwplayer.js'></script>
<p id='embedder-video'>Loading the player ...</p>
<script type="text/javascript">
  jwplayer("embedder-video").setup({
    flashplayer: 'http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf',
    playlistfile: 'http://dl.dropboxusercontent.com/u/25802134/plist/jwplayer/playlist_HD.xml',
    skin: 'http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip',
    controlbar: 'over',
    playlistsize: 120,
    playlist: 'bottom', 
    repeat: 'list',
    width: 720,
    height: 524,
    plugins: {
        'hd-2': {}
    }
  });
</script>

플레이 리스트 파일과 아울러 hd plugin을 설정을 해 줍니다. playlist를 이용하기 위해서는 playlistfile, playlist, playlistsize 이렇게 세 개의 항목을 같이 설정을 해 주어야 합니다.

Loading the player ...

 

 

관련 사이트

HD 플러그인 가이드
HD playlist 가이드