JW Player 5 - 계정 HD 화질 동영상 플레이하기

Youtube의 HD 영상을 플레이를 하기 위해서는 단순히 HD 플러그인만 설정을 해 주면 됩니다. 하지만 개인이 자신의 계정에 HD 동영상을 올리고, 그 동영상을 HD 화질로 플레이를 하기를 원한다면 HD 플러그인 외에 한 가지를 더 설정을 해 주어야 하는데 HD 전용 영상의 주소를 설정을 해 주어야 합니다.

Youtube의 경우에는 JW Player가 자동으로 저화질인지 HD 화질인지를 감지해서 저화질의 경우에는 저화질로 HD 화질의 경우에는 HD 화질로 플레이를 해줍니다만 Youtube를 제외한 일반 영상은 일반 영상과 HD 화질 영상을 사용자가 알려주어야 합니다.. 따라서 저화질용 주소와 HD 화질용 주소가 따로 존재하게 됩니다.

(그런데 개인적으로 테스트를 해 본 결과 일반 영상의 주소에 고화질 HD 영상의 주소를 넣고 플레이를 시켜도 HD 표시만 뜨지 않을 뿐 화질은 화질저하 없이 HD 화질로 플레이가 되는 것 같습니다. 단지 고화질과 저화질을 구분하고 싶을 때만 적용을 시켜주시면 되지 않을까 싶습니다. 가령 교회에서 설교방송 서비스 등을 할 때는 보통 고화질용과 저화질용을 구분해서 서비스를 하실텐데 그럴 때 사용을 하시면 될 것 같습니다.)

HD 화질은 720p 또는 1080p 화질을 의미합니다... 여기서 720p나 1080p는 파일의 세로 픽셀을 의미 하는 단위로 720p는 1280 * 720 화질을 1080p는 1920 * 1080 화질을 의미합니다. 이 이하의 화질은 모두 저화질에 속하게 됩니다. 그러면 밑에 예제를 보아가면서 확인을 해 보도록 하겠습니다.

 

 

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

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='720' height='404' 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='file=http://www.longtailvideo.com/jw/upload/bunny.flv&plugins=hd-2&hd.file=http://www.longtailvideo.com/jw/upload/bunny.mov&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&controlbar=over'>
<embed type='application/x-shockwave-flash'
  id='single2'
  name='single2'
  src='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'
  width='720'
  height='404'
  bgcolor='undefined'
  allowscriptaccess='always'
  allowfullscreen='true'
  wmode='transparent'
  flashvars='file=http://www.longtailvideo.com/jw/upload/bunny.flv&plugins=hd-2&hd.file=http://www.longtailvideo.com/jw/upload/bunny.mov&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&controlbar=over'/>
</object>

기본적인 부분을 설명을 드리겠습니다. 보시면 동영상의 주소가 2개가 있는 것을 보실 수 있으실 겁니다. 하나는 'file='로 시작을 하는 주소이고 다른 하나는 'hd.file='로 시작을 하는 주소입니다. 이미 눈치를 채셨겠지만 'file='로 시작을 하는 주소에는 저화질용 동영상의 주소를 넣어주시면 되고 'hd.file='로 시작하는 주소에는 720p 이상의 HD 화질의 동영상 파일의 주소를 넣어주시면 됩니다.

그런데 저화질용 동영상 없이 HD 화질용 동영상 파일만 존재한다면 'file='로 시작하는 주소나 'hd.file='로 시작하는 주소나 똑같이 HD 영상의 주소를 넣어주면 될 것 같습니다. 테스트 결과 'file='로 시작하는 주소의 영상을 플레이하는 기능이나 'hd.file=' 로 시작하는 주소의 영상을 플레이하는 기능이나 큰 차이가 있어보이지는 않습니다..  단지 HD 화질임을 알려주는 마크 정도만 띄워주는 의미가 있는 것 같습니다.

그리고 빨간색으로 표시된 &plugins=hd-2 를 빼놓으면 안 되겠지요.

위의 예제에 마우스를 대시면 아래와 같은 마크를 보시게 됩니다.

위의 마크는 현재 나오고 있는 화질이 HD 영상인지 아닌지를 알려주는 역할을 합니다. HD is off 는 저화질로 플레이가 되고 있다는 이야기이고 HD is on 은 HD 화질로 플레이가 되고 있다는 이야기입니다.. 마크에 마우스를 가져다 대고 클릭을 하면 HD 화질 모드와 저화질 모드를 서로 바꿀 수가 있습니다.

 

 

 

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','404','9','#000000');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('controlbar','over');
  so.addVariable('file','http://www.longtailvideo.com/jw/upload/bunny.flv');
  so.addVariable('skin','http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip');
  so.addVariable('plugins', 'hd-2');
  so.addVariable('hd.file','http://www.longtailvideo.com/jw/upload/bunny.mov'); 
  so.write('SWFObject-video');  
</script>

위의 <object> 태그를 이용한 경우와 다르지 않습니다. 역시 file에는 저화질용 파일의 주소를, hd.file에는 HD용 파일의 주소를 넣어주면 됩니다. 빨간색의 plugin을 넣어주는 것도 역시 잊으면 안 되고요.

This text will be replaced

 

 

 

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',
    file: 'http://www.longtailvideo.com/jw/upload/bunny.flv',
    skin: 'http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip',
    controlbar: 'over',
    width: 720,
    height: 404,
    plugins: {
        'hd-2': {
           'file': 'http://www.longtailvideo.com/jw/upload/bunny.mov' 
        }
    }
  });
</script>

JW Embedder 방식은 보기에 따라서는 약간 복잡해 보일 수도 있을 것 같습니다. 이 방식에서는 file과 hd.file 로 나뉘지 않고 대신 hd.file이 아예 플러그인 구조체 안으로 들어가 있습니다. 개의치 마시고 위의 file에는 저화질 영상의 주소를, 그리고 플러그인 구조체 안으로 들어가 있는 file에는 HD 영상의 주소를 넣어주시면 됩니다.

Loading the player ...

 

 

 

4. 저화질 영상의 주소와 HD 영상의 주소를 서로 바꾸면?

<p id='embedder-twisted'>Loading the player ...</p>
<script type="text/javascript">
    jwplayer("embedder-twisted").setup({
    flashplayer: 'http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf', 
     file: 'http://www.longtailvideo.com/jw/upload/bunny.mov',
    skin: 'http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip',
    controlbar: 'over',
    width: 720,
    height: 404,
    plugins: {
        'hd-2': {
            'file': 'http://www.longtailvideo.com/jw/upload/bunny.flv' 
        }
    }
});
</script>

다음과 같이 저화질 영상의 주소에 HD 영상 주소를 넣고, HD 영상 주소에 저화질 영상의 주소를 넣으면 어떤 일이 벌어질까요?? 밑의 예제를 보시면 아시겠지만 저화질 영상이 플레이 되어야 할 자리에 HD 영상이 플레이가 되고, HD 영상이 플레이가 되어야 할 자리에서는 저화질 영상이 플레이 되고 있습니다. 따라서 JW Player의 HD 플러그인이 화질을 결정하는 것은 아니라는 것을 알 수 있습니다. 화질을 결정하는 것은 영상 파일 자체인 것이지요. 따라서 HD plugin은 단지 플레이되고 있는 영상이 HD 영상인지 그렇지 않은지만 알려주는 역할만을 하는 것입니다.

Loading the player ...

 

관련 사이트

HD 플러그인 가이드
HD 플러그인 기본적 세팅 예제