HTML5 : <video>, <audio> 태그
1. <video> 태그
1-1 포맷
| 포맷 | 확장자 | 설명 |
|---|---|---|
| MPEG | .mpg .mpeg | MPEG. Moving Pictures Expert Group이 개발했다. 처음으로 웹에서 인기를 얻은 비디오 포맷이다. 모든 브라우저에서 사용되었지만, HTML5에서는 지원하지 않는다. |
| AVI | .avi | AVI (Audio Video Interleave). Microsoft가 개발했다. TV 하드웨어나 비디오 카메라에 흔하게 쓰이는 포맷이다. 윈도우 컴퓨터 환경에서 잘 작동하지만, 웹에서는 그렇진 않다. |
| WMV | .wmv | WMV (Windows Media Video). 이하 avi와 동일. |
| QuickTime | .mov | QuickTime. Apple이 개발했다. TV 하드웨어나 비디오 카메라에 흔하게 쓰이는 포맷이다. 애플 컴퓨터 환경에서 잘 작동하지만, 웹에서는 그렇진 않다. |
| RealVideo | .rm .ram | RealVideo. Real Media가 개발했고 낮은 대역폭에서도 스트리밍을 지원한다. 온라인 비디오나 인터넷 TV에 여전히 쓰이지만 웹브라우저에서는 동작하지 않는다. |
| Flash | .swf .flv | Flash. Macromedia가 개발했다. 웹브라우저에서 플레이하기 위해 따로 컴포넌트(plug-in)를 요구하는 경우가 흔하다. |
| Ogg | .ogg | Theora Ogg. Xiph.Org Foundation이 개발했다. HTML5를 지원한다. |
| WebM | .webm | WebM. web giants, Mozilla, Opera, Adobe, and Google가 개발했다. HTML5를 지원한다. |
| MPEG-4 or MP4 | .mp4 | MP4. Moving Pictures Expert Group이 개발했다. QuickTime에 기반했으며 최근의 비디오 카메라나 TV하드웨어에 자주 쓰인다. 모든 HTML5 브라우저를 지원한다. 유튜브에서 추천되는 포맷이다. |
즉 HTML5 표준에서는 MP4, WebM, Ogg을 사용해야 한다. 모든 브라우저를 지원하는 MP4가 추천된다.
1-2 문법
1 2 3 4 5 | <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 브라우저에서 지원되는 포맷이 아닙니다. </video> | cs |
1-3 속성
| 속성 | Value | 설명 |
|---|---|---|
| autoplay | autoplay | 준비되면 자동재생한다. |
| controls | controls | 플레이/일시정지 버튼 등 컨트롤바를 보이게 한다. |
| height | pixels | 높이를 지정한다. |
| loop | loop | 비디오를 무한반복한다. |
| muted | muted | 비디오가 음소거된다. |
| poster | URL | 비디오가 다운로드 될 때까지, 혹은 사용자가 플레이하기 전까지의 이미지를 지정한다. |
| preload | auto metadata none | 페이지가 로드될 때, 비디오도 미리 로드할 지 지정한다. |
| src | URL | 비디오의 주소를 지정한다. |
| width | pixels | 너비를 지정한다. |
2. <audio> 태그
오디오를 위한 태그.
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
MP3가 모든 브라우저에서 지원되며, 추천된다.
2-1 문법
1 2 3 4 5 | <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 브라우저에서 지원되는 포맷이 아닙니다. </audio> | cs |
2-2 속성
3. Youtube
브라우저에 맞게 일일이 포맷을 변환하고, 하나씩 소스태그에 넣는 것은 피곤하다.
유튜브에 업로드하고 유튭에서 지원하는 방식으로 갖다붙이는게 더 편하다.
<embed> 등으로 삽입하는 방법은 더 이상 권장되지 않는 방법이며, 유튜브에서 공유-퍼가기 기능으로 얻을 수 있는 <iframe> 방식이 권장된다.
링크주소에 파라미터로 autoplay, loop, controls, rel, showinfo 등을 부여하고 값으로 0,1을 줘서 옵션을 줄 수 있고, start 파라미터로 영상 시작 시점을 설정할 수도 있다.
1 | <iframe width="560" height="315" src="https://www.youtube.com/embed/pz95u3UVpaM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | cs |
