[HTML5] Video 태그 기본 속성

HTML5 이전에는 플러그인이 있는 브라우저에서만 비디오를 재생할 수 있었으나,

HTML5에서는 <video> 태그를 사용하여 웹페이지에 영상을 첨부할 수 있다.

Browser 지원 버전

브라우저 별 <video> 태그 지원 버전은 다음과 같다.

HTML5 Video Format

HTML5에서 지원하는 Video Format : MP4, WebM, Ogg

Video Format 역시 브라우저 별로 다르다.

HTML5 Video Attribute

• autopaly : 자동 재생 (true, false)

- true : 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작된다.

- false : 사용자가 재생 버튼을 누를 때까지 재생하지 않는다. 

• buffered : 버퍼링 범위 얻기

- 미디어의 어느 시간대가 버퍼에 들어 있는지 확인 할 수 있는 속성

- return type :  TimeRanges

• controls: 영상 제어 장치 on, off (true, false)
- true : 소리조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume) 할 수 있는 컨트롤러를 제공한다.
- false : 컨드롤러를 숨긴다. 커스텀 컨트롤러를 사용할 때 필요하다.

• crossorig : CORS 요청 구성
- CORS를 사용해서 관련 이미지를 패치해야하는 지를 결정한다.
- anonymous : 
- CORS 요청 수행(origin: HTTP 헤더 사용), 하지만 certificate가 전송되지 않는다.
ex) cookie, X.509 certificate, HTTP 기본 인증이 전송되지 않는다.
- 서버가 Access-Control-Origin: HTTP 헤더를 설정하지 않고 원본 사이트에 credentials을 제공하지 않으면 이미지가 오염되고 사용이 제한된다.
- use-credentials :
- cross-origin request 시 (ex. cookie, certificate, HTTP기본 인증이 수행되면) credentials이 전송된다.
ex) cookie, certificate, HTTP 기본 인증이 수행된다.
- 서버가 Access-Constrol=Allow-Credentials : HTTP header)를 통해 원본 사이트에 credentials을 제공하지     않으면 이미지가 오염되고 사용이 제한된다.
- CORS 요청없이(즉, Origin: HTTP header를 보내지 않고) 리소스를 가져와서 <canvas>요소에 오염되는 것을 방지한다.
- default 값은 anonymous로 추가 정보는 CORS 설정 속성을 참조

• height : 비디오 높이
- 비디오의 출력 영역 높이이며, CSS 픽셀 단위이다.

• loop : 반복 재생 (true, false)
- true : 영상 재생 종료 후 (동영상의 마지막에 도달하면) 자동으로 처음으로 돌아간다.
- false : 반복 재생을 하지 않는다. 

• muted : 음소거 (true, false)
- true : 오디오를 사용하지 않는다.
- false : 비디오가 재생될 때 오디오도 같이 재생한다.(default 값) 

• preload : 페이지 로드 시 비디오 파일 로드 여부 
- autoplay 속성이 preload 속성보다 우선순위가 높다. 즉 autoplay 속성이 정의되어 있으면 preload 속성은 무시된다.
- default 값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저 별로 정의된 기본값을 다르게 된다.
- none : 페이지가 로드될 때 비디오 파일 로드를 할 필요가 없다.(이 경우에는 영상의 썸네일이 뜨지 않는다.)
- metadata : 페이지가 로드될 때 비디오 파일의 메타데이터 정도만 같이 로드시킨다.
- auto : 페이지가 로드될 때 전체 비디오 파일도 같이 로드시킨다.

• poster : 썸네일 주소 설정
- 사용자가 재생버튼을 누르거나 탐색하기 전까지 비디오 대신 보여줄 이미지 주소를 설정한다.
- 속성이 명시되지 않으면, 첫 번째 프레임이 로드되기 전까지는 아무것도 표시되지 않고, 사용 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력한다. 

• src : 영상 주소 설정
- embed할 동영상의 주소(url)을 설정한다.
- 이 속성은 선택 사항으로, 비디오 블록 내의 <source> 태그를 사용하여 삽입할 동영상을 명시할 수도 있다. 

HTML5 Video Event

Video Event는 Media Event를 따른다.

Evnet의 종류가 너무 다양해서 필요한 이벤트 API를 검색해서 이용하는 것이 좋을 것 같다.

자주 쓰는 이벤트는 play, pause, timeupdate, progress 이 정도다. 

HTML5 Video Example

참고 사이트 : 

https://www.w3schools.com/html/html5_video.asp 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video