JW Player 5 - Video 링크하기

Video를 링크를 시키고자 할 때에는 미디어 파일의 주소에 비디오 파일의 주소를 링크 시키고 화면의 크기만을 살짝 바꿔주시면 됩니다..

 

1. <object> 태그를 이용하는 예제

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='480' height='295' 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://content.longtailvideo.com/videos/bunny.mp4&screencolor=000000'>
<embed type='application/x-shockwave-flash'
  id='single2'
  name='single2'
  src='http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf'
  width='480'
  height='295'
  bgcolor='black'
  allowscriptaccess='always'
  allowfullscreen='true'
  wmode='transparent'
  flashvars='file=http://content.longtailvideo.com/videos/bunny.mp4&screencolor=000000'/>
</object>

1. 위의 예와 같이 비디오의 크기를 맞춰주고
2. 실행 파일인 player.swf 파일의 주소를 설정해주고
3. 그리고 비디오 주소를 설정해 줍니다.
   오디오 파일을 열 때와 크게 다를 것이 없습니다..

 

 

2. SWFObject를 이용하는 예제

<script type='text/javascript' src='http://dl.dropboxusercontent.com/u/25802134/jw5/swfobject.js'></script>
<div id='script-video'>This text will be replaced</div>

<script type='text/javascript'>
  var so = new SWFObject('http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf','mpl','480','295','9','#000000');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','http://content.longtailvideo.com/videos/bunny.mp4');
  so.write('script-video');
</script>

1. 먼저 swfobject.js 파일의 경로를 지정 해 주셔야 합니다.
2. 그리고 빨간 색으로 표시된 두 개의 id 값을 같은 것으로 맞춥니다. 만일 같은 페이지 안에 다른 JW Player를 사용을 한다면 JW Player는 서로 같은 id값을 사용해선 안 됩니다. 각각의 JW Player에 서로 다른 id 값을 부여를 해야 합니다.
3. 비디오 화면의 크기에 맞게 화면의 크기를 정해줍니다.
4. 비디오 파일의 경로를 정해줍니다.
* 스크립트를 이용하는 방법은 html 편집방식을 사용을 해야 합니다..
* 네이버의 블로그는 스크립트를 제한하기 때문에이 스크립트 방식을 사용할 수 없습니다.

This text will be replaced

 

 

 

3. JW Embedder를 이용하는 예제

<script type="text/javascript" src="http://dl.dropboxusercontent.com/u/25802134/jw5/jwplayer.js"></script>
<div id="embedder-video" align="center">Loading the player ...</div>

<script type="text/javascript">
  jwplayer("embedder-video").setup({
    flashplayer: "http://dl.dropboxusercontent.com/u/25802134/jw5/player.swf",
    file: "http://content.longtailvideo.com/videos/bunny.mp4",
    controlbar: "bottom",
    width: 480,
    height: 295
  });
</script>

1. jwplayer.js 파일의 주소를 설정해 줍니다.
2. 역시 id를 맞춰줍니다. 여기에서는 embedder-video 라는 id 이름을 썼습니다.
3. 실행 파일인 Player.swf의 주소를 설정해주고
4. 비디오 클립의 주소를 설정해주면 됩니다.
* IPad에서는 플래시를 지원하지 않기 때문에 HTML5를 지원하는 JW Embedder 방식으로만 볼 수 있습니다.
* 스크립트를 이용하는 방법은 html 편집방식을 사용을 해야 합니다..
* 네이버의 블로그는 스크립트를 제한하기 때문에 이 스크립트 방식을 사용할 수 없습니다.

Loading the player ...