Jquery 라이브러리를 이용한 동영상 게시판 제작 방법입니다..

스킨을 만든게 있지만. 디자인에 약한지라 대략 구동만 하게 만들어서

공개는 -ㅁ-;;

방법을 적어보도록 하겠습니다~~

아래 이미지는 리스트 이미지입니다.

보시는거와 같이.

동영상 주소만 입력하므로 인하여 간단하게

아래 포멧을 지원합니다.

동영상, 음성 파일
asx, asf, avi, flv, mov, mpg, mpeg, mp4, qt, ra, smil, swf, wmv, 3g2, 3gp
aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, ra, ram, rm, wav, wma,
유투브 !!

기타 플러그인 지원파일
bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml




준비물
jquery-1.3.2.min.js ( jquery 페이지에서 받으시면 되요~~ )
jquery.media.js ( jquery 라이브러리 입니다 확장~~ )
 - http://malsup.com/jquery/media/ 제작자 페이지입니다.
 - 몇가지 jquery 1.3.2 버전이 호환이 않되는 부분이 있으므로 첨부파일을 받으세요.
플래시 플레이어 ( http://www.longtailvideo.com/players/jw-flv-player/ )

이정도 입니다 필요 파일만 압축해놓았으니 다운받아서 적절한 곳에 압축 푸시면 됩니다.

------------------------------------ 준비 단계!
list.skin.php 파일을 엽니다.

상위에 아래 와 같이 코드를 작성합니다.

                                                                                    
<script type="text/javascript">                                                     
 player_width  = 300; // 리스트에 보여질 기본 사이즈입니다. ( 개별적으로 변경가능 )  
 player_height = 300; // 리스트에 보여질 기본 사이즈입니다. ( 개별적으로 변경 가능 )
 flvPlayer_dir = '경로/player-viral.swf'; // 동영상 플레이어의 경로입니다.          
 mp3Player_dir = '경로/player-viral.swf'; // 오디오 플레이어의 경로입니다.           
</script>                                                                            
                                                                                     
                                                                                     
<!-- Jquery JS -->                                                                   
<script type="text/javascript" src="경로/jquery-1.3.2.min.js"></script>              
<!-- Jquery Class 변수 넘기기 위한 확장 라이브러리 -->                               
<script type="text/javascript" src="경로/jquery.metadata.js"></script>               
<!-- Jquery 실제 미디어를 분류해서 출력해줄 확장 라이브러리 -->                      
<script type="text/javascript" src="경로/jquery.media.js"></script>                  
<!-- Jquery 플래시 플레이어를 javascript 실행할수 있도록 도와주는 js 파일 -->        
<script type="text/javascript" src="경로/swfobject.js"></script>                     
                                                                                     
                                                                                     
<script type="text/javascript">                                                      
    jQuery.noConflict();  // prototype과 충돌 방지를 위한 jquery 변수 변경           
    jQuery(function() {                                                              
        // a 태그에 media Class 가 존재하는 것들은 변환!                             
        jQuery('a.media').media();                                                   
    });                                                                              
                                                                                     
                                                                                     
</script>                                                                            
                                                                                     

위 와 같이 하셨다면 동영상을 구동하기 위해 준비가 끝납니다.

------------------- 실제 구동시키기

구동시키기위해서 방법을 여러가지 생각하다가.

1. 파일첨부로 이용한 방식
2. 링크를 이용한 외부 파일 플레이 방식

중 소규모로 운영시 더욱 이득인 방식인 2번을 택하겠습니다
( 1번은 부가적으로 사용방법만 적겠습니다. )

list.skin.php중

for ($i=0; $i<count($list); $i++) 의 for문 안에 포함되게 적으시면됩니다.

<a class="media" href="<?=$list[$i][wr_link1]?>"></a>
위방식 대로 적으시면

링크 1에 적혀 있는 asx, asf, avi, wma, wmv, flv, mp3, swf, ra, ram, rm, rpm, rv, smi, smil

파일의 실행이 가능합니다 0ㅁ0!!! 와우 쉽죠잉 ~~

부가적으로 몇가지 설명을 드리자면..

class 부분에 내용을 더 추가하여 파라메터값으로 활용할수 있습니다.



<a class="media {type:'swf'}"   ...
위방식은 해당 내용을 플래시로 실행시킨다라는 이야기인데.

일반 플래시 파일 (.swf)은 자동인식하게 되어있습니다.

하지만 여기서 유투부 같은경우 확장자가 나오지 않기때문에

타입을 적어주므로 유투부도 지원이 가능하게 됩니다.

방법론을 적자면 전 분류로 유투브를 따로 지정하고 유투브 게시물만 type:'swf'로 지정하도록 하였습니다.



<a class="media {width:300, height:300, type:'swf'}" ...
위방식은 현재 플레이어의 가로 세로 크기를 지정합니다~~ 유용하죵~~



마지막 한가지더 !!

플래시 플레이어의 첫화면(미리보기 화면)은 이미지를 지정해줘야 합니다.
( 지정 하지 않을경우 검은 화면으로 나와요 ㅠㅠ )

첨부파일로 등록후 아래와 같이 적어줍니다~~

<a class="media {width:300, height:300, flashvars:{ image:'이미지파일 경로'}}"

플래시 플레이어에 파라메터값에 맞도록 전달하는 기능입니다.~~~~~~~





위에서 설명한 첨부파일로 이용한 경로 지정은 조금 경로를 변경해줘야 할필요가 있습니다.

만약 플레시 플레이어가 /g4/skin/board/movie/movie_play/플레이어.swf 에 존재한다면

게시판에서 현재 파일첨부 경로를 가져온다면 ../data/file/.... 이런식으로 갈겁니다.~~

플레이어 위치를 시작점으로 잡고 경로를 수정해줘야 합니다.

../../../파일경로 이런식으로 앞에 더 붙여줘야 하는 방식입니다.

플래이어가 상대경로상 문제없는곳으로 지정한다면 크게 경로를 수정할 필요는 없습니다~~




ps. 디자인만 된다면야 스킨으로 올리고 싶지만 -_-;;
응용만 잘한다면 포트폴리오형 ( 이미지 형식이 아닌 실제 웹주소 iframe 이용 )
이라던가 뮤직 자료실, 뮤비 자료실 등등 여러군대 사용가능 보입니다~~

그리고 첨부파일로 올린자료는 jquery 와 라이브러리가 버전이 않맞는 부분이 몇가지 있고
사용상 편의성때문에 수정을 가한부분이 있습니다~~

따로 해당 제작자 사이트에서 다운로드 받으신다면 해당 버전에 관련해서 고려 하셔야 합니다~


-------------------------------------------------------------------------

IE6 버전에서 문제가 발생하여

Sample.html 파일에서

<script type="text/javascript">
  jquery......
</script>

이부분을 아래와 같이 수정하시기 바랍니다.

<script type="text/javascript">
var jq = jQuery.noConflict();