티스토리 뷰

HTML

[HTML] <video>

<video>

웹 문서에 동영상을 재생하는 미디어 플레이어입니다. 비디오의 너비와 정보를 지정하고 여러가지 속성을 지정할 수 있습니다. 비디오를 지원하는 파일은 mp4, webM, avi, ogg가 있으며, 브라우저마다 지원하는 파일이 다릅니다. 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. <source> 태그를 사용하여 비디오 파일을 불러올 수 있습니다.


<video>

<video> 태그는 미디어 영상을 정의합니다.

정의(Definition)

  • <video> 태그는 미디어 영상을 재생합니다.
  • <video> 태그는 <sourece> 태그와 같이 사용합니다.

비교(Compare)

  • 동영상을 재생할 때에는 <video> 태그를 사용합니다.
  • 외부 프로그램이나 플러그인을 삽입 할 때에는 <embed> 태그를 사용합니다.

속성(Property)

속성 값(예) 설명 버전
autoplay autoplay 동영상이 바로 재생됩니다. -
buffered buffered 동영상이 버퍼링 시간을 읽을 수 있는 속성입니다. -
controls controls 비디오 컨트롤이 표시되도록 설정됩니다. -
height height = "pixel" 비디오의 높이 값을 설정합니다. -
loop loop 비디오 재생이 끝나면 다시 시작하도록 설정합니다. -
muted muted 비디오의 오디오 출력을 음소거로 설정합니다. -
poster poster = "URL" 비디오를 다운하는 동안 또는 시작버튼을 누르기 전까지 이미지를 설정합니다. -
preload preload = "auto"
preload = "metadata"
preload = "none"
페이지가 로드되고 비디오 로드 여부를 설정합니다. -
src src = "URL" 비디오 파일의 경로를 설정합니다. -
width width = "pixel" 비디오의 가로 값을 설정합니다. -

비디오 파일 포멧

포멧 설명
MP4 H.264 코덱을 사용하며 압축률이 좋고 화질도 좋은 포맷입니다.
avi 마이크로소프트의 비디오 포맷이며, 많이 사용하고 있지만 오디오 코덱을 지원하고 있지 않습니다.
ogg 오그 비디오인 테오라(Theora)와 오그 오디오인 보비스(Vorbis)에서 만든 공개 포맷입니다.
webM 구글이 개발한 공개 포맷입니다.

브라우저별 지원 포맷

비디오 포멧의 종류에 따라 실행하는데 각각의 코덱이 필요합니다. 원본비디오를 압축해서 동영상 파일로 집어넣은 것을 인코딩(encording), 영상을 보여주는 것을 디코딩(Decoding) 이라고 하며, 이 두가지를 처리하는 것을 비디오 코덱이라고 합니다.

크롬 파이어폭스 사파리 오페라 익스플로러
MP4 사용가능 사용안됨 사용가능 사용안됨 사용가능
webM 사용가능 사용가능 사용안됨 사용가능 사용안됨
ogg 사용가능 사용가능 사용안됨 사용가능 사용안됨

Sample1

결과
html
<video width="620" controls poster="이미지 경로">
    <source src="비디오.mp4" type="video/mp4">
    <source src="비디오 경로.ogv" type="video/ogg">
    <source src="비디오 경로.avi" type="video/avi">
    당신의 브라우저는 동영상을 지원하지 않습니다.
</video>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<video> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
autoplay 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
controls 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
height 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
loop 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
muted 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
poster 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
preload 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
src 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
width 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼