HTML <video> tag
HTML <video> 태그는 비디오 플레이백(영상 재생)을 지원하는 미디어 플레이어를 HTML 문서에 삽입한다.
오디오 콘텐츠에도 사용할 수 있으나, 오디오 콘텐츠에는 <audio> 태그가 좀 더 적합하다.
Attribute
| Attribute | Description |
|---|---|
| autoplay | 이 속성이 존재한다면 비디오가 자동재생된다. |
| controls | 이 속성이 존재한다면 volumn, seek, pause/resume 등을 할 수 있는 컨트롤러를 표시한다. |
| height | 비디오 플레이어의 높이를 설정한다. 단위는 pixel |
| width | 비디오 플레이어의 너비를 설정한다. 단위는 pixel |
| loop | 이 속성이 존재한다면 비디오 재생이 마친 후 자동으로 처음으로 돌아간다. |
| muted | 비디오에 포함된 오디오의 재생 여부를 나타내는 속성 |
| buffered | 버퍼링 된 부분을 나타내는 TimeRanges 객체를 반환한다. |
| played | 재생된 부분을 나타내는 TimeRanges 객체를 반환한다. |
| poster | 비디오 재생 전까지 출력되는 포스터의 주소. 설정되지 않으면 첫 번째 프레임을 출력한다. |
| src | 삽입할 비디오의 주소(url). <video> 태그 내에 <source> 요소를 사용하여 삽입할 비디오를 명시할 수 있다. |
브라우저 호환성
여기에서 브라우저별 호환 가능한 attribute를 확인할 수 있다.
예시
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.ogg">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.ogg">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>참고 자료
728x90
반응형