이번 글은 Frontend / Markup Structure 영역에서 웹페이지에 오디오(audio)와 동영상(video)을 삽입하는 방법을 정리한다.
미디어 태그의 핵심은 “재생이 되는가”보다 컨트롤 표시 여부, 브라우저 호환성, 대체(fallback)를 함께 고려하는 것이다.
1. audio / video 기본 사용법
<audio>와 <video> 태그는 이미지 태그처럼 src 속성에 미디어 파일 경로를 넣어 사용한다.
아래는 가장 기본적인 사용 예제다.
01_audio_video.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="5f5f5f">
<h1>01_audio_video.html</h1>
<figure>
<figcaption>얄코님 영상 오디오</figcaption>
<audio src="https://showcases.yalco.kr/html-css-scoop/03-05/audio.mp3" controls></audio>
</figure>
<br>
<figure>
<figcaption>얄코님 영상 비디오</figcaption>
<video src="https://showcases.yalco.kr/html-css-scoop/03-05/video.mp4" controls></video>
</figure>
</body>
</html>
2. controls 속성의 중요성
controls는
- 재생
- 일시정지
- 진행 바
- 볼륨
등을 포함한 미디어 제어 인터페이스를 표시하는 속성이다.
이 속성이 없으면 페이지에 컨트롤러 자체가 나타나지 않기 때문에 사용자는 미디어를 재생할 수 없다.
즉, 실습이나 일반적인 웹페이지에서는 controls는 거의 필수라고 보면 된다.
3. autoplay / loop 속성
autoplay는 자동 재생, loop는 반복 재생을 의미한다.
문법상으로는 다음처럼 쓸 수 있다.
<audio src="audio.mp3" autoplay loop></audio>하지만 최근 브라우저들은
- 사용자 동작 없이 재생되는 미디어
- 소리가 나는 자동 재생
를 대부분 차단한다.
그래서 실무에서는 autoplay를 직접 사용하는 경우가 많지 않다는 점을 알아두면 된다.
4. source 태그를 사용하는 방식
브라우저마다 지원하는 미디어 파일 형식이 다르다.
- Windows / Edge
- Mac / Safari
- Chrome
환경에 따라
.mp3는 되는데.wav는 안 되거나.mp4는 되는데.mov는 안 되는
차이가 발생한다.
그래서 동일한 미디어라도 여러 확장자를 준비해두고 브라우저가 지원 가능한 것을 선택하게 만드는 방식이 필요하다.
02_audio_video_src.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body bgcolor="5f5f5f">
<h1>02_audio_video_src.html</h1>
<figure>
<figcaption>얄코님 영상 오디오</figcaption>
<audio controls>
<source src="https://showcases.yalco.kr/html-css-scoop/03-05/audio.mp3" type="audio/mpeg">
<source src="https://showcases.yalco.kr/html-css-scoop/03-05/audio.wav" type="audio/wav">
<p>이 브라우저에서 오디오 태그가 지원되지 않습니다.</p>
</audio>
</figure>
<br>
<figure>
<figcaption>얄코님 영상 비디오</figcaption>
<video controls>
<source src="https://showcases.yalco.kr/html-css-scoop/03-05/video.mov" type="video/quicktime">
<source src="https://showcases.yalco.kr/html-css-scoop/03-05/video.mp4" type="video/mp4">
<source src="https://showcases.yalco.kr/html-css-scoop/03-05/video.webm" type="video/webm">
<p>이 브라우저에서 비디오 태그가 지원되지 않습니다.</p>
</video>
</figure>
</body>
</html>
5. source 태그 동작 원리
브라우저는 <source>를 위에서부터 차례대로 검사하면서
- 자신이 지원 가능한 형식이면 즉시 선택
- 지원하지 않으면 다음 source로 이동
하는 방식으로 동작한다.
그래서 동일한 미디어라도 여러 확장자를 준비해 두는 이유가 여기에 있다.
6. fallback 텍스트의 의미
<audio>나 <video> 태그 내부에 작성한
<p>이 브라우저에서 오디오 태그가 지원되지 않습니다.</p>같은 문구는
- 최신 브라우저에서는 거의 보이지 않는다
- audio/video 태그 자체를 지원하지 않는 구버전 브라우저에서만 표시된다
즉, 이미지 태그의 alt 텍스트와 비슷한 대체 콘텐츠(fallback) 역할이다.
7. 브라우저 호환성 체크의 중요성
요즘은 브라우저별로
- 지원 태그
- 지원 미디어 형식
차이가 있기 때문에, 미리 어떤 형식이 필요한지를 AI나 공식 문서를 통해 확인하는 습관이 중요해졌다.
정리
<audio>,<video>는 src로 미디어 경로를 지정한다controls가 없으면 재생 UI가 나타나지 않는다autoplay는 브라우저 정책 때문에 실무에서 거의 사용되지 않는다<source>를 여러 개 두면 브라우저별 확장자 호환 문제를 해결할 수 있다- fallback 문구는 구버전 브라우저용 대체 콘텐츠다
