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 페이지에 삽입합니다.


• 페이지 로드되면 동영상이 자동 재생되고, 반복하여 재생됩니다.


• 재생, 정지 등 조작 메뉴가 보이지 않습니다.


• 
  크기, 배치 등은
  href="https://urliveblogger.blogspot.com/2021/01/css-background-video.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;
}

<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;
}