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

JW Player로 HD 화질의 동영상을 플레이 하기 위해서는 그냥 플레이를 해서는 안 되고 HD 플러그인이 필요합니다. JW Player의 플러그인들은 모두 Longtailvideo.com 에서 지원을 하기 때문에 따로 사용자가 내려 받아서 설치를 해야 하는 파일이 존재하지는 않습니다. 단지 JW Player의 코드에 플러그인만 명시를 해 주면 됩니다..

그런데 JW Player의 HD Plugin을 사용함에 있어서 Youtube의 HD영상을 불러 올 때와, 개인적인 계정에 올려져 있는 영상을 불러올 때와 Playlist 파일의 영상을 불러올때가 조금씩 다릅니다.. 따라서 JW Player의 HD 영상을 플레이 하는 방법은 세 부분을 나누어서 보도록 하겠습니다.. 이번에는 먼저 Youtube의 영상을 불러오는 방법부터 알아보도록 하겠습니다..

 

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.youtube.com/watch?v=3fy4cqWMhyI&hd=1&plugins=hd-2&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.youtube.com/watch?v=3fy4cqWMhyI&hd=1&plugins=hd-2&skin=http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip&controlbar=over'/>
</object>

Youtube의 HD 영상을 넣는 것은 그리 어렵지 않습니다. 먼저 Youtube의 HD 영상의 주소 마지막에는 &hd=1 이라는 표시어를 넣어줍니다. 이 표시어는 해당 Youtube 영상이 HD 화질을 지원한다는 의미입니다. 그리고 중간에 &plugins=hd-2를 넣어주면 유튜브의 HD 영상을 플레이 할 수 있게 됩니다.

왜 &plugins=hd-1이 아닌 hd-2 냐고 궁금해 하실 분들이 계실 지 모르겠습니다.. HD 플러그인이 1.8, 2.0 두 가지 버전이 있는데.. hd-1은 1.8버전, hd-2는 2.0 버전이랍니다.. 2.0이 1.8보다 상위 버전이기 때문에 hd-1이 아닌 hd-2를 사용을 한답니다.

 

 

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.youtube.com/watch?v=Tb2vapEf9SI&hd=1');
  so.addVariable('skin','http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip');
  so.addVariable('plugins', 'hd-2'); 
  so.write('SWFObject-video'); 
  </script>

역시 Youtube의 HD 영상의 주소 맨 마지막에 &hd=1을 붙여주시고 빨간색의 표시를 중간에 삽입해 주시면 됩니다.

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.youtube.com/watch?v=C7CZOUeNk80&hd=1",
    skin: "http://dl.dropboxusercontent.com/u/25802134/jw5/Skins/Yyht/yyht.zip",
    controlbar: "over",
    width: 720,
    height: 404,
    plugins: {
       'hd-2': {}
    }
  });
</script>

역시 Youtube의 HD 영상의 주소 맨 마지막에 &hd=1을 붙여주시고 빨간색의 표시를 중간에 삽입해 주시면 됩니다.

Loading the player ...

 

 

관련 사이트

HD 플러그인 가이드
유튜브 HD 동영상 재생