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 를 참조하세요.