[R]HTML5 비디오(HTML5 Video)

HTML Video Example. Courtesy of Big Buck Bunny.

mov_bbb.mp4

mov_bbb.ogg

---

Playing Videos in HTML

HTML로 비디오 재생하기

Before HTML5, a video could only be played in a browser with a plug-in (like flash).

HTML5 이전 버전의 동영상은 플러그인과 같은 브라우저에서만 재생할 수있었습니다 (예 : 플래시).

The HTML5 <video> element specifies a standard way to embed a video in a web page.

HTML5 <video>요소는 비디오를 웹 페이지에 삽입하는 표준 방법을 지정합니다.

---

Browser Support

브라우저 지원

The numbers in the table specify the first browser version that fully supports the <video> element.

표의 숫자는 <video>요소 를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다 .

Element
<video>	4.0	9.0	3.5	4.0	10.5

---

The HTML <video> Element

HTML <video> 요소

To show a video in HTML, use the <video> element:

HTML로 비디오를 표시하려면 다음 <video>요소를 사용하십시오 .

Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

 

movie.ogg

movie.mp4

---

How it Works

작동 원리

The controls attribute adds video controls, like play, pause, and volume.

이 controls속성은 재생, 일시 중지 및 볼륨과 같은 비디오 컨트롤을 추가합니다.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

항상 포함 width하고 height속성 을 지정하는 것이 좋습니다 . 높이와 너비가 설정되어 있지 않으면 비디오가로드되는 동안 페이지가 깜박일 수 있습니다.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

<source>요소는 브라우저에서 선택할 수 있습니다 다른 비디오 파일을 지정할 수 있습니다. 브라우저는 인식 된 첫 번째 형식을 사용합니다.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

<video>와 </video>태그 사이의 텍스트 는 <video>요소를 지원하지 않는 브라우저에서만 표시됩니다 .

---

HTML <video> Autoplay

HTML <video> 자동 재생

To start a video automatically use the autoplay attribute:

동영상을 자동으로 시작하려면 다음 autoplay속성을 사용하십시오 .

Example

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

The autoplay attribute does not work in mobile devices like iPad and iPhone.

자동 재생 속성은 iPad 및 iPhone과 같은 휴대 기기에서 작동하지 않습니다.

---

HTML Video - Browser Support

HTML 비디오 - 브라우저 지원

In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

HTML5에는 MP4, WebM 및 Ogg와 같은 3 가지 비디오 형식이 지원됩니다.

The browser support for the different formats is:

다양한 형식에 대한 브라우저 지원은 다음과 같습니다.

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

---

HTML Video - Media Types

HTML 비디오 - 미디어 유형

File Format	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

---

HTML Video - Methods, Properties, and Events

HTML 비디오 - 메소드, 속성 및 이벤트

HTML5 defines DOM methods, properties, and events for the <video> element.

HTML5는 DOM 메소드, 속성 및 <video>요소에 대한 이벤트를 정의합니다 .

This allows you to load, play, and pause videos, as well as setting duration and volume.

이를 통해 비디오를로드, 재생 및 일시 중지 할 수있을뿐만 아니라 기간 및 볼륨을 설정할 수 있습니다.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

동영상 재생, 일시 중지 등을 알릴 수있는 DOM 이벤트도 있습니다.

Example: Using JavaScript

Big Buck Bunny 의 비디오 서비스 .

For a full DOM reference, go to our HTML5 Audio/Video DOM Reference.

전체 DOM 참조는 HTML5 오디오 / 비디오 DOM 참조로 이동하십시오 .

---

HTML5 Video Tags

HTML5 동영상 태그

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

---

출처 : https://www.w3schools.com/html/html5_video.asp