Video

비디오(video) 요소는 HTML 또는 XHTML 문서에 동영상 컨텐츠를 포함시키기 위해 사용되며, HTML 5의 일부입니다.

  • 요소 유형: 블럭 레벨(block-level)
  • 허용 컨텐츠: 대체 텍스트
참고: 현재 Gecko는 Ogg 컨테이너에 포함된 Theora 동영상 만을 지원합니다. 또한 Gecko가 비디오를 정상적으로 재생시키기 위해서는, 서버에서 올바른 MIME 타입으로 파일을 제공해야 합니다.

속성

아직 Gecko에서는 몇몇 속성들을 지원하지 않는다는 점을 참고하세요.

autoplay
부울(boolean) 속성. 이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.
autobuffer
부울(boolean) 속성. 이 값이 설정되면, 자동 재생으로 설정되어 있지 않더라도, 버퍼링을 자동으로 시작합니다(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). 동영상은 미디어 캐쉬가 가득차기 전까지 버퍼에 저장됩니다.
controls
이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.
height
비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.
loop Unimplemented bug 449157
부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.
poster
사용자가 동영상을 재생하거나 탐색(seek)하기 전까지 출력되는 포스터(poster) 프레임 주소(url) 입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터(poster) 프레임으로 출력합니다.
src
삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 source 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.
width
비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.

시간 오프셋(time offset)은 현재 초 단위의 실수 값으로 명시됩니다.

참고: HTML 5 명세서에서 시간 오프셋(time offset) 값에 대한 정의는 아직 완료되지 않은 상태라, 이후 변경될 수 있습니다.

예제

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  <code>video</code> 요소를 지원하지 않는 브라우저입니다.
</video>

재생할 수 있는 만큼의 동영상을 전송받게 되면 모두 다운로드 받지 않고도 바로 재생을 시작합니다. 동영상이 재생을 시작하기 전까지는 "posterimage.jpg" 이미지가 출력됩니다.

서버 확인 사항

다시 한번 강조하는 것이 좋을거 같습니다. Theora 동영상의 MIME 타입이 서버에 설정되지 않았다면, 비디오가 보이지 않거나 X 표시가 된 회색 상자가 나오게 됩니다. JavaScript를 사용할 수 있더라도 마찬가지 입니다.

이 문제는 사용할 Theora 동영상 파일의 확장자(".ogm", ".ogv", ".ogg"가 일반적입니다)를 "vidoe/ogg" MIME 타입에 추가하여 해결할 수 있습니다. Apache 웹 서버를 사용하는 경우 "/etc/apache"에 있는 "minme.types" 파일 또는 http.conf 내의 "AddType" 설정 명령을 이용하면 됩니다.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.

참고

Document Tags and Contributors

Contributors to this page: Suguni
Last updated by: Suguni,