[HTML] <video> 태그 사용 방법 (인코딩, controls 속성)

video 태그는 사용 방법이 매우 간단하다.

    <video width="400" height="800" controls>
        <source src="/image/kumjung.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

<video> 태그를 열어주고 width 원하는 너비와 height 높이값을 준다. (안 주면 기본 크기로 재생된다.)

<source> 태그를 열어 어떤 동영상을 어떤 유형(mp4 등)으로 넣을지 설정한다. 

 

---

인코딩

이때 html을 여는 브라우저가 지원하는 동영상 유형인지 잘 확인하고 유형을 설정하거나 인코딩을 해야 오류가 없다.

mp4는 폭넓게 모든 브라우저에서 지원하는데 재생이 안 돼 확인해보니

H.264 + AAC 방식으로 인코딩 된 MP4 포맷 이어야 한다.

 

이후 source가 재생이 안 될 경우 화면에 표시할 텍스트를 넣어준다.

---

controls 항목은

 

플레이, 정지와 같이 비디오 실행을 제어할 수 있게 버튼들이 표시된다.

불리언(boolean) 속성으로 명시만 해도 자동으로 true 값을 가진다.

 

표시된 컨트롤러에서는 다음 같은 기능 등을 수행할 수 있다.

- 재생

- 일시 정지

- 탐색

- 음량 조절

- 전체 화면 전환

 

---