HTML <video> 요소는 웹 페이지에 비디오를 표시하는 데 사용됩니다.
HTML <video> 요소
HTML로 비디오를 표시하려면 <video> 요소를 사용한다:
| <!DOCTYPE html> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 브라우저가 비디오 태그를 지원하지 않습니다. </video> </body> </html> |
위의 코드를 실행한 결과물이 아래 그림이다.
HTML 비디오 동작 방식
control 속성은 재생, 일시 중지 및 볼륨과 같은 비디오 컨트롤을 추가한다.
항상 width 및 height 속성을 포함하는 것이 좋다. 높이와 너비를 설정하지 않으면 비디오를 로드하는 동안 페이지가 깜박일 수 있다.
<source> 요소를 사용하면 브라우저가 선택할 수 있는 대체 비디오 파일을 지정할 수 있다. 브라우저는 인식된 첫 번째 형식을 사용한다.
<video> 태그와 </video> 태그 사이의 텍스트는 <video> 요소를 지원하지 않는 브라우저에서만 표시된다.
HTML <video> 자동재행(autoplay)
비디오를 자동으로 시작하려면 autoplay 속성을 사용합니다:
| <!DOCTYPE html> <html> <body> <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 브라우저가 비디오 태그를 지원하지 않습니다. </video> </body> </html> |
위의 코드를 실행한 결과물이 아래 그림이다. 페이지가 열리면 동영상이 자동으로 실행이 된다.
autoplay 후 muted 를 추가하여 비디오가 자동으로 재생되도록 합니다(단 음소거됨):
| <!DOCTYPE html> <html> <body> <video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 브라우저가 비디오 태그를 지원하지 않습니다. </video> </body> </html> |
위의 코드를 실행한 결과물이 아래 그림이다. 페이지가 열리면 동영상이 자동으로 실행이 되고 음소거된다.
HTML 비디오 형식
MP4, WebM 및 Ogg의 세 가지 비디오 형식이 지원됩니다. 다양한 형식에 대한 브라우저 지원은 다음과 같다:
| 브라우저 | MP4 | WebM | Ogg |
| Edge | 지원 | 지원 | 지원 |
| Chrome | 지원 | 지원 | 지원 |
| Firefox | 지원 | 지원 | 지원 |
| Safari | 지원 | 지원 | 미지원 |
| Opera | 지원 | 지원 | 지원 |
HTML 비디오 - 미디어형식
| 파일형식 | 미디어형식 |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML 비디오 - method, property, event
HTML DOM은 <video> 요소에 대한 메서드, 속성 및 이벤트를 정의한다.
이를 통해 동영상을 로드, 재생 및 일시 중지하고 기간 및 볼륨을 설정할 수 있다.
또한 비디오가 재생되기 시작하거나 일시 중지되는 등을 알려줄 수 있는 DOM 이벤트도 있다.
| <!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playPause()">재생/중지</button> <button onclick="makeBig()">크게</button> <button onclick="makeSmall()">작게</button> <button onclick="makeNormal()">중간</button> <br><br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 브라우저가 HTML 비디오를 지원하지 않습니다. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> <p>비디오 제공 <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p> </body> </html> |
위 코드를 실행한 결과물의 내용은 아래와 같다.
HTML video tag
| 태그 | 설명 |
| <video> | 비디오 또는 동영상 정의 |
| <source> | <video> 및 <audio>와 같은 미디어 요소에 대한 여러 미디어 리소스를 정의합니다 |
| <track> | 미디어 플레이어에서 텍스트 트랙 정의 |
지금까지 HTML 비디오 관련하여 예제를 통해 재생, 정지, 비디오 크기 등에 예제를 실습해보았다.
모두 화이팅입니다!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 플러그인(Plug-ins) (0) | 2023.06.21 |
|---|---|
| HTML 오디오(Audio) (0) | 2023.06.20 |
| HTML 멀티미디어(HTML Multimedia) (0) | 2023.06.18 |
| HTML SVG 그래픽스 (0) | 2023.06.17 |
| HTML 캔버스 그래픽스(Canvas Graphics) (0) | 2023.06.16 |
댓글