A Full Stack Develpor

Wagtail 문서에서는 Emebed Panel을 통해서 동영상 주소를 추가 시키는 방법으로 동영상을 추가시켰다. 

하지만 비디오 자체를 업로드 하여 관리하기 쉽게 만들어보려고 한다. 

Wagtail에는 Wagtailvideo라는 모듈이 있다. 

모듈 사용법은 https://pypi.org/project/wagtailvideos/을 참고하자

플레이어를 Custom 하는 방법에 대해서 기술해보려고 한다. 

{% wagtailvideos_tags %}

{% video self.video autoplay controls controlsList=nodownload id=myvideo height=300 width=512 %}

wagtailvideo 문서를 확인하면 확인할 수 있겠지만 html에 영상 추가는 위와 같이 하면 된다. 

여기서 문서와 다른 내용이 추가가 되었을텐데 id 값과 download 방지 기능을 추가한 것이다.

(간단하게 이렇게 속성만 추가하면 되었었는데 굳이 백엔드에서 상속받아서 재정의를 하려는 뻘짓을 저질렀다.. 덕분에 공부를 잘했다..) 

html에 video 태그가 생성되어 동영상이 표시가 되는데 태그에 요소 값을 주고 싶으면 입력하면 된다. 

여기서 id = "myvideo"가 아닌 id=myvideo로 태그 추가를 해야한다. 

그리고 controlsList속성을 nodownload를 주게 되면 플레이어에서 다운로드 버튼이 사라질 것이다. 

하지만 오른쪽 마우스 클릭으로 다운로드와 f12개발자 모드로 다운 받는 것은 막을 수가 없다. 여기선 jquery를 통해 방지하는 방법을 소개하려고 한다. 

https://server-engineer.tistory.com/563

위 블로그를 참고했다. 

<script type="text/javascript"> // F12 버튼 방지 
        $(document).ready(function(){ 
            $(document).bind('keydown',function(e){ 
                if ( e.keyCode == 123 /* F12 */) { 
                    e.preventDefault(); e.returnValue = false; 
                } 
            }); 
        }); // 우측 클릭 방지 

        document.onmousedown=disableclick; 
        status="Right click is not available."; 

        function disableclick(event){ 
            if (event.button==2) { 
                alert(status); return false; 
            } 
        } 
</script>

위 코드를 head태그에 추가하면 된다. 

CSS 커스텀을 위해 위에서 id 값을 추가해주었다. CSS 적용 방법은 일반 html css적용이랑 같다. 

https://jusths.tistory.com/92 다음 블로그를 참고하자