묻고답하기
jwplayer embadder 방식사용문의
2011.06.19 01:18
jwplayer를 삽입할수 있는 방식에는 3가지가 있는 것으로 알고 있습니다.
1. <object> 태그를 이용하는 예제
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='340' height='24' id='single1' name='single1'>
<param name='movie' value='http://dl.dropbox.com/u/25802134/jw/player.swf'>
<param name='allowfullscreen' value='true'>
<param name='allowscriptaccess' value='always'>
<param name='wmode' value='transparent'>
<param name='flashvars' value='file=http://dl.dropbox.com/u/25802134/Music/Friends%26Lovers.mp3&repeat=always'>
<embed type='application/x-shockwave-flash'
id='single2'
name='single2'
src='http://dl.dropbox.com/u/25802134/jw/player.swf'
width='340'
height='24'
bgcolor='undefined'
allowscriptaccess='always'
allowfullscreen='true'
wmode='transparent'
flashvars='file=http://dl.dropbox.com/u/25802134/Music/Friends%26Lovers.mp3&repeat=always'/>
</object>
2. Script를 이용하는 예제
<script type='text/javascript' src='http://dl.dropbox.com/u/25802134/jw/swfobject.js'></script>
<div id='audio-mp3'+
'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('http://dl.dropbox.com/u/25802134/jw/player.swf','ply','340','24','9','#000000');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('repeat','always')
so.addVariable('file','http://dl.dropbox.com/u/25802134/Music/Friends%26Lovers.mp3');
so.write('audio-mp3');
</script>
3. JW Embedder를 이용하는 예제
<p align="center">아래는 JW Embedder 오디오의 예</p>
<script type="text/javascript" src="</script '>http://dl.dropbox.com/u/25802134/jw/jwplayer.js"></script>
<div id="embadder-mp3" align="center">Loading the player ...</div>
<script type="text/javascript">
jwplayer("embadder-mp3").setup({
flashplayer: "http://dl.dropbox.com/u/25802134/jw/player.swf",
file: "http://dl.dropbox.com/u/25802134/Music/Friends%26Lovers.mp3",
controlbar: "bottom",
width: 340,
height: 24
});
</script>
현재 common/js/common.js에
else if(/\.mp3$/i.test(src)) {
html = '<embed src="'+request_uri+'common/tpl/images/flvplayer.swf" allowfullscreen="true" autostart="'+autostart+'" width="'+240+'" height="'+20+'" flashvars="&file='+src+'&width='+240+'&height='+20+'&autostart='+autostart+'" wmode="'+params.wmode+'" />';
다음과 같은 코드를 삽입하여 mp3 첨부시 jwplayer로 재생이 되도록 하였습니다. 스마트폰에서 재생이 되게끔 하려고 하는데, 안드로이드폰에서는 정상이나, 아이폰에서는 위 코드가 적용이 안되는 부분이 있었습니다.
JW Embedder 방식은 플래시와 HTML5를 동시에 지원을 하는 방식입니다. 대부분의 브라우저들은 플래시를 지원을 합니다만 유독 애플의 경우 플래시를 지원을 안 하고 있지요.. 따라서 애플의 아이패드는 앞의 <object> 태그나 또는 두 번째의 Script 방식으로 로딩을 했을 때 정상적으로 동영상이나 음악을 감상을 할 수가 없습니다.. 애플의 아이패드에서 JW Player로 정상적으로 동영상이나 음악을 감상하려면 HTML5 표준태그인 <video> 태그를 사용을 해야 하는데 이 JW Embedder는 플래시와 HTML5 표준을 동시에 지원을 합니다.. 따라서 JW Embedder 방식은 아이패드를 지원하는 유일한 방식입니다.
JW Embedder 방식으로 바꿔보려하니, ''이 중간에 있고, ""이 어디를 구분해줘야하는지 어렵습니다.
<script type="text/javascript" src="</script '>http://dl.dropbox.com/u/25802134/jw/jwplayer.js"></script>
<div id="embadder-mp3" align="center"></div>
<script type="text/javascript">
jwplayer("embadder-mp3").setup({ flashplayer: "http://dl.dropbox.com/u/25802134/jw/player.swf", file: "http://dl.dropbox.com/u/25802134/Music/Friends%26Lovers.mp3",controlbar: "bottom",width: 340,
height: 24
});
</script>
위의 코드를 common.js에 삽입시 변경해야할 부분을 알려주시면 감사하겠습니다.