기본 태그
audio 태그
웹 페이지에서 오디오 파일을 재생하는 데 사용됩니다. 여러 속성을 통해 컨트롤을 설정할 수 있습니다.
controls: 플레이어의 컨트롤바를 표시합니다.autoplay: 접속했을 때 플레이어가 자동으로 재생되도록 합니다. 하지만 사용자가 원하지 않는데 재생되면 안되기 때문에 기본적으로 브라우저에서 막습니다.muted: 플레이어의 오디오 출력이 음소거됨을 명시합니다.loop: 플레이어를 무한반복합니다.
<audio src="audio-file.mp3" controls></audio>video 태그
웹 페이지에서 비디오 파일을 재생하는 데 사용됩니다. 다양한 속성으로 비디오를 조절할 수 있습니다.
Video.js 라이브러리를 이용하면 모든 브라우저에 동일하게 UI를 제공할 수 있습니다.
실시간 라이브 스트리밍 서비스를 제공할 경우에는 WEBRTC 기술을 사용합니다.
controls: 플레이어의 컨트롤바를 표시합니다.autoplay: 접속했을 때 플레이어가 자동으로 재생되도록 합니다. 하지만 사용자가 원하지 않는데 재생되면 안되기 때문에 기본적으로 브라우저에서 막습니다.muted: 플레이어의 오디오 출력이 음소거됨을 명시합니다. 만약 muted 되어있다면 autoplay가 가능합니다.loop: 플레이어를 무한반복합니다.
<video src="video-file.mp4" width="320" height="240" controls></video>source 태그
audio 또는 video 태그 내부에서 미디어 파일의 경로와 형식을 정의합니다. 여러 형식의 소스를 제공하여 브라우저의 호환성을 높입니다. 하지만 대부분의 웹 브라우저가 mp3, mp4 파일을 지원하기 때문에 요즘은 의미 없는 태그입니다.
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>오디오 형식 호환성 표
| 형식 | Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|---|
| MP3 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| OGG | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| WAV | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
비디오 형식 호환성 표
| 형식 | Chrome | Firefox | Safari | Edge | Opera |
|---|---|---|---|---|---|
| MP4 | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| WebM | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| Ogg | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
