HTML5 VIDEO 태그로 웹페이지에 동영상 넣기

HTML5에서 새로 나온 기능인 <video> 태그를 사용해서 웹 페이지에 동영상을 넣을 수 있습니다.

 

<video id="myVideo" src="movie.mp4" controls autoplay></video>

 

1. 호환성

브라우저 호환성은 IE9 부터 <video> 태그를 지원합니다. 지원하는 동영상 포맷을  IE9 부터  .webm, .mp4 를 지원합니다.

 

2. 주요 속성

- width : 동영상 너비

- height : 동영상 높이

- controls : 설정되면 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.

- autoplay : 설정되면 페이지 로딩시 자동 실행됩니다.

- oncontextmenu : false 를 반환하면 마우스 오른쪽 키로 띄우는 팝업 메뉴를 사용할 수 없게 됩니다.

- src : 동영상을 지정합니다. 내부의 <source> 속성을 사용하여 여러개의 동영상을 지정할 수도 있습니다.

 

<video oncontextmenu="return false;" id="myVideo" width="640" controls autoplay>

  <source src="movie.mp4" type="video/mp4">

</video>

 

 

 

3. 이벤트

 

- 테스트용 비디오 태그 입니다. 컨트롤이 제공되지 않고, 자동플레이가 되지 않습니다.

 

<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>

 

<video id="myVideo" oncontextmenu="return false;" width="640">

    <source src="./movie/tool.mp4" type="video/mp4">

    브라우저가 비디오 태그를 지원하지 않습니다.

</video>

<br />

<button id="playBtn">플레이</button>

<button id="fullBtn">전체화면</button>

 

- 플레이 이벤트

 

<script>

$(document).ready(function() {

    $("#playBtn").on("click", function() {

        $("#myVideo").trigger("play");

    });

});

</script>

 

스크립트 document.getElementById("myVideo").play(); 로도 플레이 됩니다.

 

- 풀 스크린

<script>

$(document).ready(function() {

    $("#fullBtn").on("click", function() {

        var elem = document.getElementById("myVideo");

        if(elem.requestFullscreen) {

            elem.requestFullscreen();

        } else if(elem.mozRequestFullScreen) {

            elem.mozRequestFullScreen();

        } else if (elem.webkitRequestFullscreen) {

            elem.webkitRequestFullscreen();

        } else if (elem.msRequestFullscreen) {

            elem.msRequestFullscreen();

        }

    });

});

</script>

 

- 비디오 플레이 완료

<script>

$(document).ready(function() {

    $("#myVideo").on("ended", function() {

         console.log("Video Finished");

    });

});

</script>

 

 

 

비디오 태그의 주요 속성 및 이벤트에 대해서 알아 보았습니다. 자세한 정보는 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video 를 참조하세요.