최신 웹 개발 튜토리얼

HTML5 비디오


HTML 비디오 예. 씨의 빅 벅 버니 .

»그것을 자신을 시도

HTML5 비디오는 무엇입니까?

HTML5의 사양은 부분적으로 개체 요소를 교체, 비디오 재생의 목적을 위해 비디오 요소를 도입했다.

초기 채택에있는 비디오 코딩 형식으로 합의의 부족에 의해 방해되었다하지만 HTML5 비디오는, 대신에 독점 어도비 플래시 플러그인을 사용하여 이전의 사실상의 표준으로 웹에서 비디오를 표시하는 새로운 표준 방식이 자사의 제작자가 의도 오디오 코딩 포맷은 웹 브라우저에서 지원해야한다.


HTML에서 동영상 재생

HTML5하기 전에 웹 페이지에 비디오를 표시하기위한 표준이 없었다.

HTML5하기 전에, 동영상은 플러그인으로 재생할 수 있습니다 (like flash) .

HTML5의 <video> 요소는 웹 페이지의 영상을 포함하는 표준 방식을 지정한다.


브라우저 지원

테이블의 숫자는 완벽하게 지원하는 최초의 브라우저 버전 지정 <video> 요소를.

요소
<video> 4.0 9.0 3.5 4.0 10.5

html로 <video> 요소

HTML에서 비디오를 표시하려면 사용 <video> 요소를 :

<video width="320" height="240" controls>
  <source src="/html/movie.mp4" type="video/mp4">
  <source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
»그것을 자신을 시도

작동 원리

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

항상 포함하는 것이 좋습니다 widthheight 속성.

높이와 너비가 설정되지 않은 경우, 브라우저는 비디오의 크기를 알 수 없습니다. 효과는 페이지가 변경됩니다 것 (or flicker) 비디오 부하있다.

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

여러 <source> 요소는 다른 비디오 파일에 링크 할 수 있습니다. 브라우저는 처음 인식 형식을 사용합니다.


HTML <video> 자동 실행

비디오가 자동으로 사용을 시작하려면 autoplay 속성을 :

<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>
»그것을 자신을 시도

autoplay 속성은 아이 패드 및 아이폰과 같은 모바일 기기에서 작동하지 않습니다.


HTML 비디오 - 브라우저 지원

현재, 3 지원되는 비디오 형식은 거기에있는 <video> 요소 : MP4, WebM을, 그리고 오그 :

브라우저 MP4WebMOgg
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 비디오 - 미디어 유형

파일 형식 미디어 유형
MP4 video/mp4
WebM video/webm
Ogg video/ogg

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

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

이것은 당신이 시간과 볼륨을 설정뿐만 아니라,로드 게임 및 비디오를 일시 정지 할 수 있습니다.

등 DOM의 비디오 재생이 시작 때 통지 수있는 이벤트, 일시 정지도있다

예 : 자바 스크립트를 사용하여




의 영상 제공 : 빅 벅 버니 .

»그것을 자신을 시도

전체 DOM의 참고로, 우리로 이동 HTML5 오디오 / 비디오 DOM 참조 .


HTML5 비디오 태그

꼬리표 기술
<video> 비디오 나 동영상을 정의
<source> 예컨대 미디어 요소 여러 미디어 리소스 정의 <video><audio>
<track> 미디어 플레이어에서 텍스트 트랙을 정의