[Html] video 태그 사용법 & 예제 총정리

HTML5에 새로 추가된 <video> 태그
오디오나 비디오와 같은 멀티미디어를 직접 재생할 수 없었던 과거에는 웹 브라우저에서 플러그인(plug-in) 프로그램을 사용했습니다. 대표적으로 flash가 있죠. 그래서 과거에는 인터넷에서 음악을 듣거나 온라인 강의를 실청하려고 할 때 특정 프로그램을 설치하라는 메시지가 뜨곤 했는데 HTML5에서는 이런 플러그인 없이도 멀티미디어를 사용할 수 있는 태그들이 추가되었습니다.

 

 video 태그 사용법 

<!--1번 방법-->
<video src="비디오 경로"></video>

<!--2번 방법-->
<video>
  <source src="비디오 경로"></source>
</video>

HTML5에서 웹 문서에 영상을 첨부하고 싶다면 <video> 태그를 사용합니다. 위의 예제처럼 video 태그와 src에 비디오 파일의 경로만 작성해주면 웹 문서에 영상이 첨부됩니다. 하지만 보통 video태그는 controls(컨트롤 막대) 속성과 함께 사용한다는 것은 알아두셨으면 좋겠습니다. controls 속성을 사용하지 않으면 비디오를 재생시키거나 일시 정지할 수 없기 때문에 매우 불편합니다. 

 

video 태그에서 사용할 수 있는 속성

속성	설명
controls	영상 컨트롤 막대를 표시합니다. 컨트롤 막대에는 재생/멈춤, 진행바, 볼륨 등이 있습니다.
width, height	화면에 표시되는 영상의 크기를 조절합니다.
autoplay	영상을 자동 재생합니다.
loop	영상을 반복해서 재생합니다.
muted	영상은 재생하지만 소리는 음소거합니다.
preload	영상을 재생하기 전에 미디어 파일을 다운로드 할 것인지 정합니다.
poster	브라우저나 인터넷 문제등으로 영상을 재생할 수 없을 경우 표시합니다.

 

controls (재생 바 생성)

See the Pen 비디오태그 사용법1 by wjdxo513 (@wjdxo513) on CodePen

 

controls 속성을 사용하면 미디어 파일에 컨트롤 막대가 함께 표시됩니다. 속성은 값은 따로 없으며 controls라는 속성만 입력하면 됩니다.

 

 

width, height (비디오 크기 설정)

See the Pen 비디오 태그 사용법2 by wjdxo513 (@wjdxo513) on CodePen.

 

width와 height 속성을 사용하면 화면에 표시되는 비디오의 크기를 조절할 수 있습니다. width나 height 값 하나만 지정하면 나머지는 자동으로 계산하여 표시해줍니다.

 

 

preload (파일 다운로드 여부)

See the Pen 비디오 태그 사용법3 by wjdxo513 (@wjdxo513) on CodePen.

• none : 미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드를 합니다.
• metadata : 미디어 파일 전체를 다운로드하지 않고 메타 정보만 다운로드합니다.
• auto : 사용자가 즉시 이용할 수 있도록 웹 문서를 로드할 때 미디어 파일도 다운로드합니다. preload라고만 설정하면 auto 값을 기본으로 합니다.

preload 속성은 파일을 재생하기 전에 미디어 파일을 모두 다운로드할 것인지 결정합니다. 사용할 수 있는 속성은 none, metadata, auto 3가지가 있습니다.

 

muted (음소거로 재생)

See the Pen 비디오 태그 사용법4 by wjdxo513 (@wjdxo513) on CodePen.

 

비디오를 재생할 때 소리만 끄고 영상만 재생하고 싶다면 muted 속성을 추가합니다. 특별히 소리가 필요하지 않은 영상이라면 사용할만한 속성입니다.

 

 

autoplay (자동 재생)

See the Pen 비디오 태그 사용법5 by wjdxo513 (@wjdxo513) on CodePen.

 

autoplay를 사용하면 비디오 파일을 다운로드하자마자 즉시 실행합니다. 참고로 크롬과 모바일에서는 무분별한 광고 등의 재생을 막기 위한 목적으로 자동 재생되지 않습니다. 가급적이면 사용하지 않기를 권장드리는 속성입니다.

 

 

loop (반복 재생)

See the Pen 비디오 태그 사용법6 by wjdxo513 (@wjdxo513) on CodePen.

 

영상 재생이 끝날을 때 반복 재생하는 속성입니다.

 

 

poster (영상 오류 시 대체 이미지)

See the Pen 비디오 태그 사용법7 by wjdxo513 (@wjdxo513) on CodePen.

 

브라우저나 인터넷 문제 등으로 인해 비디오를 재생할 수 없을 때 대체할 수 있는 포스터 이미지를 지정하는 속성입니다.

 

 source 태그 사용법 (여러 개의 비디오 파일 형식 지정하기) 

<video>
  <source src="비디오 경로" type="video/mp4" ></source>
  <source src="비디오 경로" type="video/ogg" ></source>
  대체 내용
</video>

• src : 미디어 파일의 경로를 지정합니다.
• type : 웹 브라우저가 해당 미디어 파일을 재생할 수 있는지 확인하도록 미디어 파일의 유형을 알려줍니다.
• codecs : 비디오 코덱을 지정합니다.

브라우저에 따라 지원하는 코덱이 다르기 때문에 한 가지 형식만 사용했을 경우 일부 오래된 브라우저에서는 작동을 안 할 수 있습니다. 사용자의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저도 모두 비디오를 재생할 수 있도록 ogv 파일도 함께 지정해주어야 합니다. 최근에는 무료 코덱을 사용하면서 화질도 뛰어난 webm 파일까지 함께 사용합니다. 이렇게 여러 형식의 비디오 파일을 함께 사용하려면 <vidio> 태그와 <source> 태그를 함께 사용해 여러 개의 파일을 지정해야 합니다. <source> 태그에서는 미디어 파일의 경로를 지정하는 src 속성과 미디어 파일의 형식을 알려주는 type속성을 명시합니다.

 

source 태그의 type 속성을 입력하지 않으면?
웹 브라우저가 재생이 가능한 파일인지 확인하므로 트래픽이 낭비됩니다. 따라서 type 속성은 꼭 지정해주도록 합시다.

 

source 태그 예제

See the Pen 비디오 태그 사용법8 by wjdxo513 (@wjdxo513) on CodePen.

 

 

 

웹 브라우저에서 사용 가능한 비디오 파일 형식

웹 브라우저에서 사용할 수 있는 비디오 파일 형식은 MP4, WebM, OGV 이렇게 3가지가 있습니다. 익스플로러와 사파리는 MP4파일 형식만을 지원하며 파이어폭스와 오페라는 WebM과 OGV 파일형식을 지원합니다. 그리고 크롬은 MP4, WebM, OGV 의 모든 파일 형식을 지원합니다. 웹 문서에서 비디오 파일을 사용할 때 해당 브라우저에서 지원하는 비디오 파일 형식을 확인해야 합니다.

 

+ video.js 플러그인 (비디오 플레이어 js)

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" />
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video class="video-js vjs-default-skin" controls preload="auto" width="400" height="300" data-setup="{}">
<source src="sample.mp4" type="video/mp4" />
<source src="sample.ogv" type="video/ogv" 
</video>

위와 같이 웹 브라우저마다 표시되는 video태그의 형태가 일정하지 않아 문제가 되는 경우가 있습니다.이럴때 간단하게 사용할 수 있는 플러그인이 video.js 입니다. video.js를 사용하면 기존에는 video 태그가 동작하지 않아 사용할 수 없었던 IE8미만의 버전에서도 자동으로 플래시를 활용하여 동영상을 재생시킵니다.

 

※ video에 자막을 달고 싶다면 아래 글을 참고해주세요

[Html] track 태그 사용법 (video에 자막 연결하기)