워드프레스 블로그에 동영상을 삽입하는건 생각보다 꽤 귀찮고 어려운 일이더군요. embed태그를 쓰면 블로그 레이아웃이 깨져버리고 object태그를 쓰자면, IE와 여타 브라우저에서 표현에 차이를 보여 embed와 같은 간단한 방법으로는 동영상을 삽입 할 수 없더라구요.
제가 선택한 방법은 역시 플러그인 이었습니다. 이런 저런걸 찾아서 써봤지만 딱 제맘에 드는게 없었습니다. 그래서 그중에서 coolplayer(v3.5)라는 플러그인을 기본으로해서 그 플러그인의 다른 모든 기능들을 없애버리고, 동영상을 삽입해 주는 코드만을 차용해서 플러그인을 만들어 봤습니다.
만들어서 개인적으로 사용한지는 꽤 오래되지만, 표준검사에서 걸리는게 있어서 나중에 바로잡은뒤 공개하려다 결국은 그냥 포기하고 공개합니다.
설치
- 기본적으로 정보를 얻은 글은 OhYoung님의 글이었습니다. 이 글을 빌어 감사드립니다
- 압축을 풀면 나오는 ‘
media-filter.php‘ 파일을wp-content/plugins폴더에 업로드 - 관리자화면(wp-admin) > 플러그인(plugins) 화면에서 “Media-Filter”를 활성화(
activate)
설정
- 기본값으로 설정 할 수있는 것들이 몇가지 있습니다.
- 동영상의 기본적인 높이와 너비 자동재생,
태그를 사용하려면 true 로 설정 // END Options
- 33번줄부근의
$this->base값을 조정해서 사용중인 서버에 올린 동영상을 쉽게 등록 할 수도 있습니다.base = get_settings('siteurl') . "/wp-content/uploads/media";
사용
태그를 사용해서 동영상 주소를 감싸주면 됩니다.// 또는// 또는
- 위 세번째 경우는 파일의 설정부(
$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"를 사용합니다. - GoogleVideo:
type="gv", 내용에는 비디오 ID 만 적습니다. 구글비디오는 너비와 높이값을 필요로 합니다. - YouTube:
type="yt", 내용에는 비디오 ID만 적습니다. 유튜브 동영상은 너비와 높이값을 필요로 합니다. - Mncast:
type="mnc", 내용에는 비디오 ID만 적습니다. - 비디오 ID만을 사용하지않고 전체 주소를 사용해서 FLV 동영상을 등록할 경우 기본적으로는 type 을 지정하지 않아도 자동으로 주소를 인식해 FLV로 등록하지만, 정상 작동하지 않는 경우
type="flv"를 사용하시기 바랍니다.. - 그 외에 asf, wmv, asx등의 동영상의 주소가
http://somedomain/path/to/make_asx.php?no=187와 같이 .asf등으로 끝나지 않는 경우 type을 직접 입력해 주어야 합니다. 입력하지 않을경우 기본값인 wmv 로 인식합니다.
- 다음 동영상의 경우 : 일반적인 tvpot 동영상은
나름대로 간단하게 만들어 보려고 했는데, 오히려 사용법이 복잡해 보일수도 있겠군요.
한가지 여전히 남은 문제는 M$계열? 의 동영상 포멧들입니다.(wmv, asf, asx 등) IE hack을 쓰면 제대로 표현은 되지만, 다른 플러그인의 영향으로 HTML 주석이 변형될 수 있는 문제때문에 동영상이 제대로 표현되지 않기도 하더군요. 이 문제는 javascript를 사용하면 해결되긴 하지만 개인적으로 워낙에 javascript를 많이 사용하는지라 이 플러그인에서는 글 내용을 치환하는 방법만을 사용하고자 User-Agent를 통해 ‘MSIE’ 가 포함되어있을 경우와 그렇지 않을경우로 나눠버렸습니다
따라서 IE 계열의 브라우저(Maxthon, Avant Browser 등)에서 제대로 작동할지는 장담 할 수 없군요. 혹시 좋은 방법 있으신분 알려주시면 적용하도록 하겠습니다.
11 responses to “동영상 삽입을 도와주는 Media-Filter 플러그인”
덕분에 잘 사용하고 있습니다. 감사합니다.
082net님 질문좀 드리겠습니다 [act type=”asf” w=”320″ h=”280″]추출영상주소[/act] 이런게 해서 영상이 재생되는것 확인 했습니다 그런데요 영상에서 오른쪽마우스클릭하게 되면 영상주소가 나오네요 그것를 방지 할수 있는방법의 없나요? 참고스샷=>http://cfile24.uf.tistory.com/image/174375594DC53ACD0BCC87 embed 태그를 보게되면요 6) 메뉴 금지: enablecontextmenu=false(디폴트) 오른쪽 마우스를 사용할 수 없도록 한다. 이런기능이 있습니다 어떻게 추가 할수 있으까요 ?
[…] Media-Filter […]
어이쿠, 글 올린지 얼마 되지 않아 바로 수정해 주셨네요.
빠른 수정 감사드립니다. (__)
이제 이걸로 또 뭘 뚝딱거릴지 또 고민해 봐야겠네요^^
저의 무지로 발생한 일입니다. stripos 라는 함수가 PHP5.x 에만 포함된것인 줄 모르고 사용해 버렸네요. 불편을 드려 죄송합니다.
우선 수정해 놓은 파일이 이곳에 있으니 적용 해 보시기 바랍니다.(‘다른이름으로(링크) 저장 하기’ 하세요)
안녕하세요, MEDIA-FILTER 플러그인 사용하다가 막히는 부분이 있어서 몇자 남겨봅니다.
본문에 나와있는 대로 [act] 태그를 사용해서 동영상을 삽입만 하면
라는 에러가 떠 버리는군요. 혹시 Coolplayer도 설치해야 하나요?
사실 에러 뜬지는 꽤 됐지만, 괜시리 혼자 고쳐보겠다고 쇼하다가 결국 포기하고 질문 드립니다 -_-a
소개해 주신 플러그인도 자바스크립트를 사용하더라구요. 자바스크립트를 사용하기 때문에 표준검사에 걸리진 않지만, 삽입되는 코드를 직접 입력해 보면 역시 표준검사에 걸리구요… 이 문제에 대해선 세살때부터 손을 놔버렸습니다
저는 vPIP 를 사용하는데요. 포스트를 쓸 때 아래에 옵션에 맞게 선택해주면 코드를 생성해주네요.
http://ipm.pe.kr/blog/music/21/ 에서 대충 확인가능한데요. 예전 플러그인이 오작동하여 이번에 바꾼거에요. 한번 확인해보세요.
eiron// embed 태그는 XHTML 1.0 에 어긋나지 않나요? W3C에서 정의되지 않은 태그라고 문제제기 하더라구요
object 태그는 별 꼼수를 다 써봐도, IE Hack 을 쓰지 않는 이상 IE에서 해결되지 않더라구요…
그런데 IE Hack을 쓰면
wpautop, blanceTag등 formatting관련 함수들을 거치면서 공간이 생기거나 주석처리되지 않는등의 문제가 발생하더라구요(플러그인 우선순위에따라 다르긴 하지만…)bum// 저도 Windows Media 파일들을 FLV플레이어로 플레이하는 방법이 없나해서 여기 저기 둘러본적이 있는데 결국은 찾지 못했답니다
언제나 여러 필요했던 것들을 만들어주시네요.
제가 찾고 있던것은 flash audio player처럼 flash movie player였는데
이것은 임베딩만 도와 주는 것 같네요. 일반 wmv, asf, avi파일을 flash ui에서 불러오는 그런것이 없을까요? ~
Google Analytics를 위한 부분을 제외하면 javascript를 전혀 사용하지 않고 있기에 WMV같은 것은 emded로 사용하고,
(
)Flash는 object안에 param을 병행해서 쓰는데, IE, Firefox, Safari, Opera 모두 별다른 문제 없더군요. 물론, XHTML 1.1에도 부합합니다. 사용하는 theme의 차이인가요?