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

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 (재생 바 생성)

<video src="경로" controls>
</video>

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

 

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

<video src = "경로" controls width="300" height="200">
</video>

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

 

preload (파일 다운로드 여부)

<video src="경로" width="300" controls preload="none">
</video>

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

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

 

muted (음소거로 재생)

<video src="경로" width="300" controls muted>
</video>

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

 

autoplay (자동 재생)

<video src="경로" width="300" controls autoplay>
</video>

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

 

loop (반복 재생)

<video src="경로" width="300" controls loop>
</video>

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

 

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

<video src = "경로" controls width="300" poster="error.png">
</video>

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

 

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속성을 명시합니다.