설명
Introduced in HTML 5
HTML5 에서 소개되었습니다. 따라서 HTML5를 지원 또는 부분지원(video tag에 대해서) 지원하지 않으면 사용하실 수 없습니다.
The video element is used to embed video content in an HTML or XHTML document.
"video" 는 Video content를 HTML 또는 XHTML 문서에 포함하고 싶을 때 사용되어지고 있습니다.
For a list of supported formats, see Media formats supported by the audio and video elements.
video 가 지원하는 포맷들의 리스트를 확인하시려면 Media formats supported by the audio and video elements 를 확인하세요
Usage Context
| Permitted content |
Transparent content model, containing either a src attribute or one or more <source> element, followed by either flow content or phrasing content , with no <video> or <audio(토픽 생기면 링크걸어야)> elements. src 속성 또는 하나 또는 그 이상의 <source> 구성요소를 포함하여야 하는 명료한 컨텐츠 모델로서 <video>나 <audio> 구성요소가 아닌 컨텐츠의 흐름이나 컨텐츠의 표현에 따릅니다. |
| Tag omission |
None, both start and end tags must be present 반드시 시작과 끝 모두에 tag를 표현해야 합니다. |
| Permitted parent elements |
Any element that accepts flow content, or any element that accepts phrasing content. Flow content 나 Phrasing content를 허용하는 내에서 어떤 구성요소든 가능합니다. |
| Normative document |
속성
Like all other HTML elements, this element supports the global attributes.
다른 HTML 구성요소들 처럼 video는 global attributes 들을 모두 지원합니다.
autoplay
A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
참(True)/거짓(False)만을 속성으로 가집니다. 참(true)으로 설정되면 영상이 자동적으로 데이터의 로딩이 끝나면 멈추지 않고 가능한 바로 재생됩니다.
autobuffer Non-standard Obsolete (더 이상 필요없는)
A Boolean attribute; if specified, the video will automatically begin buffering even if it's not set to automatically play. This should be used for cases in which it is considered likely that the video will be played (for example, if the user navigated to the page specifically to play the video, not if there happens to be a video embedded along with other content). The video is buffered until the media cache is full.
참/거짓만을 속성으로 가집니다. 자동으로 재생되는 것이 설정되어 있지 않더라도 영상의 버퍼링이 자동으로 시작됩니다.
이 속성은 비디오가 재생될 것이 고려되는 경우에 사용됩니다. (예를 들면 다른 컨텐츠를 따라 영상이 포함되어있는 경우가 아니라 사용자가 영상이 재상되는 특정 페이지를 방문했을 때를 말합니다. ) 미디어 케쉬가 가득찰 때까지 영상은 버퍼링됩니다.
buffered
An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object.
이 속성은 매체가 버퍼링 되어 있는 시간 길이를 결정하여 읽을 수 있게 합니다. 이 속송은 TimeRanges 를 포함합니다.
controls
If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
이 속성을 사용하면 Gecko의 경우 영상의 재생과 볼륨 조절 탐색, 정지와 영상의 재개를 허용할 수 있도록 컨트롤을 제공합니다.
height
The height of the video's display area, in CSS pixels.
CSS에서 말하는 pixel과 같이 영상의 높이를 말합니다.
loop
A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.
참(True)/거짓(False)만을 속성으로 가집니다. 참(true)으로 설정되면 비디오가 끝에 다다랐을 때 자동으로 다시 재생할 수 있게 됩니다.
muted
A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.
참(True)/거짓(False)만을 속성으로 가집니다. 영상 안에 포함된 소리에 대한 기본 설정을 표시하기 위함입니다. 만약 참(true)로 설정되면 소리는 소리가 나게되며 거짓(false)로 설정되면 이 속성 기본값은 False로 비디오가 재생되는 동안 소리가 재생될 것이라는 의미입니다.
muted이면 아무래도 재생되지 않을 것인데 어째서 재생된다고 하는 것인지 모르겠습니다.
preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
아래에 열거되는 속성들은 웹브라우저가 저자의 생각을 사용자의 경험에 다른 힌트를 제공합니다.
- none: hints that either the author thinks that the user won't need to consult that video or that the server wants to minimize its traffic; in others terms this hint indicates that the video should not be cached.
- none : 페이지의 저자가 사용자가 이 미디어 자원을 필요로 할것을 예상하지 못했거나, 서버에서 네트워크 트래픽을 최소화 하기를 원하는 경우 이다.
- metadata: hints that though the author thinks that the user won't need to consult that video, fetching the metadata (e.g. length) is reasonable.
- metadata : 페이지의 저자가 이 미디어의 자원을 필요로 할 것을 예상하지 못하였지만 자원의 메타데이터(크기, 첫 프레임, 트랙 리스트, 길이등)을 가져오는 것이 의미가 있는 경우 이다.
- auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole video could be downloaded, even if the user is not expected to use it.
- auto : 다른 사용자가 영상을 사용하더라도 사용자가 필요하다면 전체 동영상을 다운로드 받을수 있다.
- the empty string: which is a synonym of the auto value.
- the empty string : auto 값과 같은 의미 이다.
If not set, its default value is browser-defined (i.e. each browser can choose its own default value), though the spec advises it to be set to metadata.
만약 설정이 안되어 있을 경우 기본 값은 브라우저의 재량이지만 metadata 상태를 권장한다.
Usage notes: The autoplay attribute has precedence over this one as if one wants to automatically play a video, the browser will obviously need to download it. Setting both the autoplay and the preload attributes is allowed by the specification.
The browser is not forced by the specification to follow the value of this attribute; it is a mere hint.
Usage notes : 만약 자동으로 동영상을 재생하고자 할 경우 autoplay 요소를 우선으로 두고 브라우저는 반드시 이것을 다운로드를 해야 한다. 사양에 따라 autoplay와 preload 두 속성을 모두 사용할수 있다.
브라우저가 속성 값을 따르도록 명세를 하지 않는다.
poster
A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.
사용자가 재생하거나 탐색하기 전에 보여줄 poster를 알리는 URL입니다. 다시 말하면 사용자가 컨트롤러를 통해 영상에 대해 어떤 동작을 요구하기 전까지 보여줄 화면의 URL을 표기하는 곳입니다. 이 속성이 명확하게 설정되어 있지 않으면 영상의 첫번째 frame을 읽을 수 있을 때가지 화면에 아무것도 나타나지 않으며 첫번째 frame을 읽을 수 있을 때 poster로서 첫번째 frame이 나타나게 됩니다.
src
The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.
video를 HTML/XHTML에 문서에 포함시키기 위한 URL을 표기하는 곳입니다. src는 반드시 표기하는 것이 아니라 video tag를 이용하여 code block내에 있는 source 속성에 기록하는 대신에 사용할 수 있습니다.
width
The width of the video's display area, in CSS pixels.
영상의 가로 크기를 말합니다.
Time offsets are currently specified as a float value representing the number of seconds to offset.
시간 offset들은 부동 수소점으로 표기되게 됩니다. 또한 여기서의 부동 소수점은 초 단위로써 표현됩니다.
Note: The time offset value definition has not yet been completed in the HTML 5 specification and is subject to change.
참고: 시간 offset 값의 정의는 HTML5에서 명확하게 정해지지 않았습니다. 변경될 소지를 가지고 있습니다.
| 지원 | Gecko | Presto | WebKit | Trident |
| Normative document |
예제
<!-- Simple video example --> <video src="videofile.ogg" autoplay poster="posterimage.jpg"> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="videofile.ogg">download it</a> and watch it with your favorite video player! </video> <!-- Video with subtitles --> <video src="foo.ogg"> <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English"> <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska"> </video>
The first example plays a video, starting playback as soon as enough of the video has been received to allow playback without pausing to download more. Until the video starts playing, the image "posterimage.jpg" is displayed in its place.
The second example allows the user to choose between different subtitles.
첫번째 예제는 동영상을 재생하면서 일시중지를 하지않고 재생된 내용을 곧바로 다운로드 받는 경우 이다. 동영상 재생이 시작 될 때까지 "posterimage.jpg"를 표시한다.
두번째 예제는 다른 자막들 중 사용자가 선택할 수 있는 경우 이다.
Server support
It's worth re-emphasizing for the time being, that if the MIME types for Theora video are not set on the server, the video may not show or show a gray box containing an X (if JavaScript is enabled).
You can fix this problem for the Apache Web Server by adding the extension used by your Theora video files (".ogm", ".ogv", or ".ogg" are the most common ones) to the MIME type "video/ogg" via the "mime.types" file in "/etc/apache" or via the "AddType" configuration directive in httpd.conf.
만약 Theora 비디오에 대한 MIME 형식이 설정되어있지 않을 경우, 비디오가 개재되지 않거나 또는 X가 표시된 회색 박스가 보여지는 경우가 있다.(JavaScript는 활성화 되어 있다,) (노란부분을 어떻게 해석해서 넣아야 할지 모르겠음)
이것은 Apa
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
Your web host may provide an easy interface to MIME type configuration changes for new technologies until a global update naturally occurs.
DOM Interface
This element implements the HTMLVideoElement interface.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
| autoplay attribute | 3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
| buffered attribute | ? | 4.0 (2.0) | ? | ? | ? |
| controls attribute | 3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
| loop attribute | 3.0 | -- bug 449157 | 9.0 | 10.5 | 3.1 |
| muted attribute | ? | --(이것의 의미는?) | ? | ? | ? |
| poster attribute | 3.0 | 3.6 (1.9.2) | 9.0 | 10.5 | 3.1 |
| preload attribute | 3.0 | 4.0 (2.0) | 9.0 |
Supported under the older name autobuffer |
3.1 |
| src attribute | 3.0 | 3.5 (1.9.1) | 9.0 | 10.5 | 3.1 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | ? | 1.0 (1.0) | ? | ? | ? |
| autoplay attribute | ? | 1.0 (1.0) | ? | ? | ? |
|
buffered attribute |
? | 4.0 (2.0) | ? | ? | ? |
|
controls attribute |
? | 1.0 (1.0) | ? | ? | ? |
|
loop attribute |
? | -- | ? | ? | ? |
|
muted attribute |
? | -- | ? | ? | ? |
|
poster attribute |
? | 1.0 (1.0) | ? | ? | ? |
|
preload attribute |
? | 4.0 (2.0) | ? | ? | ? |
| src attribute | ? | 1.0 (1.0) | ? | ? | ? |
참고
- 원본 - https://developer.mozilla.org/en/HTML/Element/video
- Media formats supported by the audio and video elements
- audio
- Using HTML5 audio and video
- Manipulating video using canvas
- nsIDOMHTMLMediaElement
- TinyVid - examples using ogg files in HTML 5.
- The video element (HTML 5 specification)
- Configuring servers for Ogg media
