워드프레스 블로그에 동영상을 삽입하는건 생각보다 꽤 귀찮고 어려운 일이더군요. embed태그를 쓰면 블로그 레이아웃이 깨져버리고 object태그를 쓰자면, IE와 여타 브라우저에서 표현에 차이를 보여 embed와 같은 간단한 방법으로는 동영상을 삽입 할 수 없더라구요.
제가 선택한 방법은 역시 플러그인 이었습니다. 이런 저런걸 찾아서 써봤지만 딱 제맘에 드는게 없었습니다. 그래서 그중에서 coolplayer(v3.5)라는 플러그인을 기본으로해서 그 플러그인의 다른 모든 기능들을 없애버리고, 동영상을 삽입해 주는 코드만을 차용해서 플러그인을 만들어 봤습니다.
만들어서 개인적으로 사용한지는 꽤 오래되지만, 표준검사에서 걸리는게 있어서 나중에 바로잡은뒤 공개하려다 결국은 그냥 포기하고 공개합니다.
설치
- 기본적으로 정보를 얻은 글은 OhYoung님의 글이었습니다. 이 글을 빌어 감사드립니다
- 압축을 풀면 나오는 '
media-filter.php
' 파일을wp-content/plugins
폴더에 업로드 - 관리자화면(wp-admin) > 플러그인(plugins) 화면에서 "Media-Filter"를 활성화(
activate
)
설정
- 기본값으로 설정 할 수있는 것들이 몇가지 있습니다.
- 동영상의 기본적인 높이와 너비 자동재생,
<act></act>
태그의 사용가능을 선택할 수 있습니다. 파일의 상단부에 13번줄 부근을 보면 아래와 같은 내용이 있습니다.// START Options
var $width = 320;// 플레이어 너비 기본값
var $height = 280;// 플레이어 높이 기본값
var $autostart = 0;// 0: 자동재생 안함 , 1: 자동재생 함
var $use_html_tag = false;//<act></act> 태그를 사용하려면 true 로 설정
// END Options - 33번줄부근의
$this->base
값을 조정해서 사용중인 서버에 올린 동영상을 쉽게 등록 할 수도 있습니다.// change below line for default media URL (No trailing slash)
$this->base = get_settings('siteurl') . "/wp-content/uploads/media";
사용
[act][/act]
태그를 사용해서 동영상 주소를 감싸주면 됩니다.[act]http://path/to/media.wmv[/act]
// 또는
[act w="320" h="280" auto="0"]http://path/to/media.wmv[/act]
// 또는
[act w='320' h='280' auto='0']media.wmv[/act]- 위 세번째 경우는 파일의 설정부(
$this->base
)에서 지정한 경로에 동영상 파일을 업로드 했을 경우에만 해당됩니다. - auto : 자동재생 설정. "0"(자동재생 안함) 또는 "1"(자동재생). 기본값은 "0"
- w : 지정하지 않으면 기본값인 "320"을 사용합니다.
- h : 지정하지 않으면 기본값인 "280"을 사용합니다.
- type : GoogleVideo, Youtube, TvPot, Mncast 등의 FLV 동영상을 삽입하거나 .php, .asp, .jsp 등을 사용하는 주소를 사용해 동영상을 삽입하는 경우 이 설정값을 사용합니다.
- 다음 동영상의 경우 : 일반적인 tvpot 동영상은
type="d1"
, 다음블로그 동영상은type="d2"
, tvpot의 큰화면 동영상일 경우type="d3"
를 사용합니다.[act type="d1"]Y09vYTrMVMQ$[/act] - GoogleVideo:
type="gv"
, 내용에는 비디오 ID 만 적습니다. 구글비디오는 너비와 높이값을 필요로 합니다.[act type="gv" w="425" h="350"]-597036799727406101[/act] - YouTube:
type="yt"
, 내용에는 비디오 ID만 적습니다. 유튜브 동영상은 너비와 높이값을 필요로 합니다.[act type="yt" w="425" h="350"]k1fwPU2C_kk[/act] - Mncast:
type="mnc"
, 내용에는 비디오 ID만 적습니다.[act type="mnc"]10006413520061108164356[/act] - 비디오 ID만을 사용하지않고 전체 주소를 사용해서 FLV 동영상을 등록할 경우 기본적으로는 type 을 지정하지 않아도 자동으로 주소를 인식해 FLV로 등록하지만, 정상 작동하지 않는 경우
type="flv"
를 사용하시기 바랍니다..[act type="flv" w="425" h="350"]http://www.youtube.com/v/k1fwPU2C_kk[/act] - 그 외에 asf, wmv, asx등의 동영상의 주소가
http://somedomain/path/to/make_asx.php?no=187
와 같이 .asf등으로 끝나지 않는 경우 type을 직접 입력해 주어야 합니다. 입력하지 않을경우 기본값인 wmv 로 인식합니다.[act type="asf" w="320" h="280"]http://somedomain/path/to/make_asx.php?no=187[/act]
- 다음 동영상의 경우 : 일반적인 tvpot 동영상은
나름대로 간단하게 만들어 보려고 했는데, 오히려 사용법이 복잡해 보일수도 있겠군요.
한가지 여전히 남은 문제는 M$계열? 의 동영상 포멧들입니다.(wmv, asf, asx 등) IE hack을 쓰면 제대로 표현은 되지만, 다른 플러그인의 영향으로 HTML 주석이 변형될 수 있는 문제때문에 동영상이 제대로 표현되지 않기도 하더군요. 이 문제는 javascript를 사용하면 해결되긴 하지만 개인적으로 워낙에 javascript를 많이 사용하는지라 이 플러그인에서는 글 내용을 치환하는 방법만을 사용하고자 User-Agent를 통해 'MSIE' 가 포함되어있을 경우와 그렇지 않을경우로 나눠버렸습니다 따라서 IE 계열의 브라우저(Maxthon, Avant Browser 등)에서 제대로 작동할지는 장담 할 수 없군요. 혹시 좋은 방법 있으신분 알려주시면 적용하도록 하겠습니다.