HTML5 Video 태그 소스 다운로드 방지

<video> 태그는 웹으로 비디오나 영화를 재생시킬수 있는 태그

src : 재생할 비디오의 주소를 지정한다.
width : 요소의 너비를 지정한다. (value: pixels)
height : 요소의 높이를 지정한다. (value: pixels)
loop : 반복 재생을 지정한다. (value: loop)
poster : 사용자 에이전트가 비디오 데이터를 사용할 수 없는 경우 이미지 파일의 주소를 권장한다. (value: URL)
preload : 음악을 재생하기 전에 모두 불러올지 지정한다. (value: auto, metadata, none)
none : 사용자가 비디오를 필요로하지 않을 것이라고 명시, 미리 다운로드 하지 않음
metadata : 사용자가 비디오를 필요로 하지 않을 것이지만, 기본정보(크기,첫프레임,오디오길이 등)는 가져온다.
auto : 사용자가 비디오를 필요로 하고 미리 다운로드를 한다 (기본값)
autoplay : 자동 재생을 지정한다. (value: autoplay) , 모바일에서는 보안상 이유로 자동재생이 되지 않는다.
muted : 비디오의 오디오 출력을 음소거로 지정한다. (value: muted)
controls : 사용자 에이전트트의 기본 컨트롤러를 사용하도록 지정한다.

웹페이지를 만들고 비디오를 올렸는데 비디오 원본 소스를 다운로드 되는 버튼이 기본적으로 생겨서 아무리 찾아도 막을 수 있는 방법을 아무리 찾아도 쉽게 찾을 수 없었다. 어떤 분은 프로그램으로 컨트롤을 감추는 프로그램까지 직접 제작해서 사용하는 분들도 계셨다. 코드 한줄로 간단하게 원본 비디오 다운로드를 막을 수 있는 소스 코드가 있어서 공유한다.

controlsList="nodownload" : 이 설정이 없으면 비디오 원본 소스를 아무나 다운로드 받을 수 있다. 

<video id="video1" width="320" height="240px" controls poster="abc.jpg" controlsList="nodownload"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 당신의 브라우저는 video태그를 지원하지 않습니다. </video>

video 태그는 기본적으로 다운로드 버튼이 생겨서 비디오 원본을 아무나 다운로드 할 수 있다.

controlsList="nodownload" 소스 적용 후 사라진 다운로드 버튼

이렇게 하면 아무나 쉽게 다운로드 할 수 없게 만들 수 있다.

모바일 웹에서도 동일하게 적용할 수 있다.