[HTML] video tag
포스트
취소

[HTML] video tag

HTML <video> tag

HTML <video> 태그는 비디오 플레이백(영상 재생)을 지원하는 미디어 플레이어를 HTML 문서에 삽입한다.

오디오 콘텐츠에도 사용할 수 있으나, 오디오 콘텐츠에는 <audio> 태그가 좀 더 적합하다.

Attribute

AttributeDescription
autoplay이 속성이 존재한다면 비디오가 자동재생된다.
controls이 속성이 존재한다면 volumn, seek, pause/resume 등을 할 수 있는 컨트롤러를 표시한다.
height비디오 플레이어의 높이를 설정한다. 단위는 pixel
width비디오 플레이어의 너비를 설정한다. 단위는 pixel
loop이 속성이 존재한다면 비디오 재생이 마친 후 자동으로 처음으로 돌아간다.
muted비디오에 포함된 오디오의 재생 여부를 나타내는 속성
buffered버퍼링 된 부분을 나타내는 TimeRanges 객체를 반환한다.
played재생된 부분을 나타내는 TimeRanges 객체를 반환한다.
poster비디오 재생 전까지 출력되는 포스터의 주소. 설정되지 않으면 첫 번째 프레임을 출력한다.
src삽입할 비디오의 주소(url). <video> 태그 내에 <source> 요소를 사용하여 삽입할 비디오를 명시할 수 있다.

브라우저 호환성

여기에서 브라우저별 호환 가능한 attribute를 확인할 수 있다.

예시

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 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>

참고 자료

  • https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video
  • https://www.w3schools.com/tags/tag_video.asp
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.

[Docker] 도커 컨테이너에서 호스트에 있는 명령어를 실행하는 방법

[Linux] bash 쉘 스크립트 특정 문자열이 포함되었는지 확인하는 방법