html_purifier 우회하여 게시판에 video, audio 태그넣기 > 그누보드5 팁자료실

그누보드5 팁자료실

html_purifier 우회하여 게시판에 video, audio 태그넣기 정보

html_purifier 우회하여 게시판에 video, audio 태그넣기

본문

 

1. 55831 이상의 버전을 사용하시는 분들은 설명만 읽고

코어를 건드리지 않는 hook 을 설치하세요. - https://sir.kr/g5_plugin/11459

 

----------

 

2. 질문게시판을 보면 가장 심심찮게 올라오는 질문글이 에디터의 html 모드에서 video 및 audio 태그를 사용하는 방법에 관한 것인데... 근본적인 해결책으로 html_purifier 에서 이걸 해소하는 방법을 공유합니다.

참고페이지는 이걸 배포한 사이트에서 직접 설명한 문서입니다.

음... 이 사이트는 아직도 보안주소 처리를 하지 않았군요.ㅜㅠ

 

http://htmlpurifier.org/docs/enduser-customize.html

 

----------

 

3. 예를 들어서 저는 video 태그를 아래처럼 사용합니다. 동영상은 이미지와 똑같아서 따로 width 를 지정해주지 않아도 원본 가로사이즈가 디폴트값입니다. 그래서 스타일로 max-width 만 조절해주면 알아서 반응형이 됩니다.

 

<video style="max-width:100%" src="mp4경로" autoplay loop controls controlslist="nodownload"></video>

 

controlslist="nodownload" 는 다운로드 항목을 안 보이게 하는 것이구요.

나머지 autoplay loop controls 는 모두 불린값을 가집니다.

그렇다고 컨트롤바를 안 보이게 하려고 controls=0 또는 false 를 넣어도 소용이 없습니다.

웹에서 보여질 때는 숫자 0 이 아니라 문자 "0" 으로 표현되기 때문에 불린값이 true 가 되기 때문이구요.

따라서 이걸 안 보이게 하려면 아예 처음부터 저걸 안 적어주면 되겠습니다.

 

그리고 autoplay 에 대해서 말씀드리면 크롬 브라우저 안에서 자동재생은 a 태그시의 "_blank" 로 페이지가 열리거나 자바스크립트의 location.href 를 통해서 열릴때만 자동재생이 됩니다.

나머지 새로고침 reload() 등을 통한 방법은 백약이 무효입니다.

따라서 게시판이 열리자마자 그 페이지의 주소로 다시 location.href 가 일어나고 두번째로 들어갈 때는 그걸 무력화시키는 코드를 짜거나 아니면 아이프레임 안에 동영상을 띄워서 역시 유사한 방식으로 걸어주는 상황을 본인 자신이 만들어줘야 합니다.

예를 들어서 현재 다음카카오 동영상은 자동재생을 그런 방식으로 하고 있습니다.

 

----------

 

4. 아래처럼 video 와 audio 의 코드를 만들어 주세요.

php 7버전 미만이신 분들은 [어쩌구저쩌구] 대괄호 부분을 array(어쩌구저쩌구) 로 바꿔주세요.

 


$add_html_tag = $config -> getHTMLDefinition(1);
$add_html_tag -> addElement('video', 'Block', 'Flow', 'Common', ['src' => 'Text', 'autoplay' => 'Bool', 'loop' => 'Bool', 'controls' => 'Bool', 'muted' => 'Bool', 'controlslist' => 'Text']);
$add_html_tag -> addElement('audio', 'Block', 'Flow', 'Common', ['src' => 'Text', 'autoplay' => 'Bool', 'loop' => 'Bool', 'controls' => 'Bool', 'muted' => 'Bool', 'controlslist' => 'Text']);
 

 

----------

 

5. lib/common.lib.php 파일을 보면... 656~657 라인쯤에 아래와 같은 코드가 보일거에요.

그 아래에 위 코드를 넣어줍니다.

참고로 링크페이지에서 이프문으로 걸어준 더 효율적인 소스라는 놈은

태그 하나 밖에 필터링 해제를 못하기 때문에 여러개를 쓰려면 덜 효율적이라는 이 코드를 써야 합니다.

버전 탓인지도 모르겠으나... 여하튼요.

 


 //유튜브, 비메오 전체화면 가능하게 하기
$config->set('Filter.Custom', array(new HTMLPurifier_Filter_Iframevideo()));

 

----------

 

6. 더 추가하고 싶은 속성이나 다른 막힌 태그는 이렇게 같은 방식으로 해 줍니다.

그리고 width 나 height 는 넣지 않았습니다.

가로 세로 사이즈를 주려면 style="width:300px;height:200px" 이렇게 스타일로 주시기 바랍니다.

참고할 것은 audio 의 경우 가로 세로 사이즈를 입력하지 않으면 그 디폴트값이 크롬에서는 300-54 이니 이건 기억해 두시기 바랍니다.

 

----------

 

7. 마지막으로 중앙정렬입니다. 아래처럼 div 에서 스타일로 중앙정렬을 주세요.

 

<div style="text-align:center"><video ... ></video></div>

 

여기서 주의사항은

 

<div>

<video></video>

</div>

 

위와 같이 에디터에서 칸띄우기를 하면 어떤 경우에는 저 칸 사이로 부지불식 간에 <p> 란 놈이 끼어듭니다.

그러니... 칸띄우기 없이 바싹 밀착하여 사용하시기 바랍니다.

추천
5

댓글 12개

전체 126 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT