[javascript/jquery] javascript video fullscreen example / 자바스크립트 비디오 전체화면 전환 방법

[javascript/jquery] javascript video fullscreen example / 자바스크립트 비디오 전체화면 전환 방법

 

 

javascript 에서

 

video tag 를 이용하여

 

custom control bar 를 구현하다보면

 

fullscreen

 

즉, 전체화면을 구현해야 하는 경우가 있습니다.

 

그럴때는 아래와 같이 스크립트를 사용하시면 됩니다!

 

 

우선 아래와 같은 video 태그가 있다고 가정하고,

<video id="video" width="400" autoplay>
    <source src="VIDEO SRC" type="video/mp4">
</video>

 

위 비디오를 전체화면 모드로 변환하기 위한

 

버튼을 아래처럼 생성합니다.

 

<button type="button" onclick="set_fullscreen()" id="id_fs_btn">fullscreen</button>

 

그리고 위 버튼의 클릭 액션이 일어날때 호출되는 함수

 

set_fullscreen 함수를 아래와 같이 작성합니다.

 

    function set_fullscreen() {
        if(vid.requestFullScreen){
            vid.requestFullScreen();
        } else if(vid.webkitRequestFullScreen){
            vid.webkitRequestFullScreen();
        } else if(vid.mozRequestFullScreen){
            vid.mozRequestFullScreen();
        }
    }

 

그리고 실행하면 정상적으로 전체화면이 되는것을 확인할 수 있습니다.

 

참고들 하세요!