<동영상>
HTML <video> 태그
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
IE 9 +, Firefox, Opera, Chrome 및 Safari는 모두 <video> 태그를 지원합니다.
참고: IE 8 이하 버전의 IE 브라우저는 <video> 태그를 지원하지 않습니다.
태그 정의 및 사용 지침
<video> 태그는 영화 클립이나 기타 비디오 스트림과 같은 비디오를 정의합니다.
현재 <video> 요소는 MP4, WebM 및 Ogg의 세 가지 비디오 형식을 지원합니다.
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES Firefox 21 버전부터 시작 Firefox 30부터 Linux 시스템 | YES | YES |
| Safari | YES | NO | NO |
| Op era | YES Opera 25 버전부터 시작합니다 | YES | YES |
- MP4 = MPEG 4 파일은 H264 비디오 코덱과 AAC 오디오 코덱을 사용합니다.
- WebM = WebM 파일은 VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용합니다.
- Ogg = Ogg 파일은 Theora 비디오 코덱과 AAC 오디오 코덱을 사용합니다. Vorbis 오디오 코덱
오디오 형식 MIME 유형
| format | MIME 유형 |
|---|---|
| MP4 | video/mp4 |
| WebM | video/web ㅋㅋㅋ |
| Ogg | 비디오/ogg |
HTML 4.01과 HTML5의 차이점
<video> 태그는 HTML5의 새로운 태그입니다.
팁 및 메모
팁: <video> 태그와 </video> 태그 사이에 텍스트 콘텐츠를 배치하면 <video> 요소를 지원하지 않는 브라우저가 태그 정보를 표시할 수 있습니다.
선택적 속성
New: HTML5의 새로운 속성.
| Property | Value | Description |
|---|---|---|
| autoplayNew | autoplay | 이 속성이 있으면 비디오가 준비되는 즉시 재생됩니다. |
| controlsNew | controls | 이 속성이 있으면 재생 버튼과 같은 컨트롤을 사용자에게 표시합니다. |
| heightNew | pixels | 비디오 플레이어의 높이를 설정하세요. |
| loopNew | loop | 이 속성이 나타나면 미디어 파일 재생이 끝난 후 다시 재생을 시작합니다. |
| mutedNew | muted | 이 속성이 나타나면 동영상의 오디오 출력이 음소거됩니다. |
| posterNew | URL | 사용자가 재생 버튼을 클릭할 때까지 비디오가 다운로드되는 동안 표시할 이미지를 지정합니다. |
| preloadNew | auto 메타데이터 none | 이 속성이 나타나면 페이지가 로드되고 재생할 준비가 되면 동영상이 로드됩니다. "autoplay"를 사용하는 경우 이 속성은 무시됩니다. |
| srcNew | URL | 재생할 영상의 URL입니다. |
| widthNew | pixels | 비디오 플레이어의 너비를 설정하세요. |
전역 속성
<video> 태그는 HTML 전역 속성을 지원합니다.
이벤트 속성
<video> 태그는 HTML 이벤트 속성을 지원합니다.
