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 동영상 관리하기