동영상 삽입하는 방법 - video - 구글 블로그 만들기

video

<video>는 HTML 페이지에 동영상을 삽입하는 태그입니다.

기본형

<video autoplay controls loop muted poster="xxx" preload="xxx">
  <source src="xxx" type="xxx">
  이 문장은 사용자의 웹 브라우저가 video 태그를 지원하지 않을 때 나타납니다!
</video>

autoplay : 동영상을 자동 재생합니다.
controls : 재생, 정지, 볼륨, 진행바 등 컨트롤 막대를 표시합니다.
loop : 동영상을 반복 재생합니다.
muted : 오디오를 음소거합니다.
poster : 동영상 재생 전에 보여줄 이미지(썸네일)입니다.
preload : 동영상를 재생하기 전에 파일의 내용을 미리 다운로드하여 불러올지를 정합니다.
source
- src : 동영상 위치를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은 MP4입니다.
- type : 동영상 타입을 입력합니다. 만약 MP4 파일이라면 video/mp4라고 적습니다.

autopaly - 자동 재생

특정한 속성 값 없이 autoplay 라고 추가하면 비디오 파일을 다운로드하자마자 재생됩니다. 하지만 이 속성을 사용하더라도 모바일 기기에서는 자동으로 재생되지 않습니다.

controls - 컨트롤 막대 표시

이 속성을 사용하면 비디오 파일에 컨트롤 막대를 함께 표시합니다. 속성 값은 따로 없고 controls 라는 속성만 입력하면 됩니다.

컨트롤 막대는 사용자가 따로 추가하는 것이 아니라 웹 브라우저에 기본적으로 내장되어 있습니다. 따라서 표시되는 컨트롤 막대의 UI는 각각의 브라우저마다 다르게 보일 수 있고 사용할 수 있는 기능도 조금씩 다릅니다. 비디오를 재생할 때는 화면 위로 마우스를 올려다 놓으면 컨트롤 막대가 나타납니다.

loop - 반복 재생

이 속성을 사용하면 비디오 파일 재생이 끝났을 때 파일의 맨 앞으로 돌아가 이어서 반복 재생합니다. loop 속성을 사용하려면 loop 라고 추가하면 됩니다.

muted - 음소거하고 재생

이 속성을 사용하면 비디오를 재생할 때 소리는 끄고 화면만 재생됩니다. 동영상을 배경으로 사용하거나 특별이 소리가 필요하지 않는 동영상이라면 muted 속성을 추가하여 음소거할 수 있습니다.

poster - 포스터 이미지 표시

브라우저 문제나 인터넷 연결 문제 등으로 비디오를 재생할 수 없을 경우 비디오 화면 자리에 대체하여 표시되는 이미지를 '포스터' 라고 부릅니다. poster 속성은 아래와 같이 비디오 파일의 썸네일 이미지를 포스터 이미지로 지정합니다.

<video src="Painting.mp4" controls poster="thumbnail.png"><video>

preload - 파일 다운로드 여부

preload 속성은 파일을 재생하기 전에 미디어 파일을 모두 다운로드 할 것인지, 일부 정보만 다운로드 할 것인지 여부를 정합니다. 사용할 수 있는 속성은 다음과 같습니다.

auto : 기본 값으로 웹 페이지를 로드할 때 비디오를 모두 다운로드합니다.
none : 사용자가 재생 버튼을 눌러야만 다운로드가 시작됩니다.
metadata : 전체 파일을 다운로드 하지 않고 메타 정보만 다운로드합니다.

source - 여러 동영상 파일 한꺼번에 지정

브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우, 일부 오래된 브라우저에서는 지원하지 않을 수 있습니다. 예를 들어 mp4 파일은 최신 브라우저에서는 모두 지원하지만 이전 버전에서는 재생되지 않을 수도 있습니다.

사용자들의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 동영상 파일을 여러개 지정해주면 좋습니다. ogv 파일이나 webm 파일처럼 여러 형식의 비디오 파일을 함께 사용하려면 <video>와 <source>를 함께 사용해야 합니다.

<video controls>
  <source src="Painting.mp4" type="video/mp4">
  <source src="Painting.webm" type="video/webm">
  <source src="Painting.ogv" type="video/ogg">
</video>

<video>는 HTML5를 지원하는 브라우저에서만 사용할 수 있기 때문에 모든 사용자들이 비디오를 재생할 수는 없습니다. 그렇다면 지원하지 않는 브라우저에서는 어떻게 해야 할까요?

다음과 같이 오래된 브라우저에서 <video>를 지원하지 않는 경우를 고려해 대체 텍스트를 표시할 수 있습니다.

<video controls>
  <source src="Painting.mp4" type="video/mp4">
  <source src="Painting.webm" type="video/webm">
  <source src="Painting.ogv" type="video/ogg">
  이 동영상을 재생하기 위해서는 HTMl5를 지원하는 브라우저가 필요합니다.
</video>

만약 HTML5를 지원하지 않는 브라우저에서도 비디오를 꼭 보여줘야 한다면 <embed>나 <object>를 사용해 삽입 할 수 있습니다.

<video controls>
  <source src="Painting.mp4" type="video/mp4">
  <source src="Painting.webm" type="video/webm">
  <source src="Painting.ogv" type="video/ogg">
  <object src="Painting.swf" type="application/x-shockwave-flash"></object>
</video>

예제

예제 1

mp4 동영상을 HTML 페이지에 삽입합니다.
페이지 로드되면 동영상이 자동 재생되고, 반복하여 재생됩니다.
재생, 정지 등 조작 메뉴가 보이지 않습니다.
크기, 배치 등은 CSS를 이용 하는 것이 좋습니다.

<video muted autoplay loop>
  <source src="//bit.ly/3kYMF9A" type="video/mp4">
  <strong>이 문장은 사용자의 웹 브라우저가 video 태그를 지원하지 않을 때 나타납니다!</strong>
</video>

video {
  display: block;
  max-width: 80%;
  margin: 20px auto;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 2

페이지가 로드되면 썸네일 이미지와 재생 메뉴를 보여줍니다.
재생 버튼을 클릭하면 동영상을 재생합니다.

<video controls poster="//bit.ly/3688dKw">
  <source src="//bit.ly/3kYMF9A" type="video/mp4">
  <strong>이 문장은 사용자의 웹 브라우저가 video 태그를 지원하지 않을 때 나타납니다!</strong>
</video>

video {
  display: block;
  max-width: 80%;
  margin: 20px auto;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

동영상 도구

구글 드라이브로 동영상 링크 만들기 Blogger 동영상 관리하기

기타 HTML 참조

HTML로 돌아 가기

동영상 삽입하는 방법 - video