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 ...
'700 컴퓨터 > 702 JW Player' 카테고리의 다른 글
JW Player 5 - 기타 옵션들 정리 (0) | 2011.04.17 |
---|---|
JW Player 5 - playlist 옵션들(controlbar, playlist) (2) | 2011.04.17 |
JW Player 5 - playlist 적용하기 (0) | 2011.04.17 |
JW Player 5 - playlist.xml 만들기 (0) | 2011.04.17 |
JW Player 5 - 스킨 적용하기 (0) | 2011.04.15 |
Jw Player - MP4 Buffering(버퍼링) 문제 해결 (4) | 2011.04.15 |
JW Player 5 - Audio 링크하기 (7) | 2011.04.14 |
JW Player 5 - 설치하기 (tistory, dropbox) (0) | 2011.04.14 |
JW Player - 계정 얻기 (10) | 2011.04.14 |
[링크] embed 태그에 대한 설명. (0) | 2011.04.09 |