autoplay 속성이란?
웹페이지가 로드되는 즉시 오디오나 비디오가 자동으로 재생되도록 하려면 autoplay 속성을 사용하면 됩니다. 이 속성은 불리언(Boolean) 속성으로, 태그에 추가하기만 하면 별도의 JavaScript 코드 없이도 미디어가 준비되는 즉시 재생이 시작됩니다.
기본 사용 예제
아래 코드는 video 태그에 autoplay 속성을 적용한 예제입니다. 페이지가 열리는 순간 비디오가 자동으로 재생됩니다.
<!DOCTYPE HTML> <html> <body> <video width = "300" height = "200" controls autoplay> <source src = "/html5/foo.ogg" type = "video/ogg" /> <source src = "/html5/foo.mp4" type = "video/mp4" /> Your browser does not support the video element. </video> </body> </html>
코드 설명
- controls: 재생/일시정지, 음량 조절 등 기본 컨트롤 바를 화면에 표시합니다.
- autoplay: 미디어가 로드되는 즉시 자동으로 재생을 시작합니다.
- <source>: 브라우저 호환성을 위해 여러 형식(ogg, mp4)을 제공합니다. 브라우저는 지원하는 첫 번째 소스를 선택해 재생합니다.
주의할 점: 브라우저 자동재생 정책
대부분의 최신 브라우저(Chrome, Safari, Firefox 등)는 사용자 경험 보호를 위해 소리가 있는 미디어의 자동 재생을 차단하는 정책을 적용하고 있습니다. 따라서 자동 재생이 확실히 작동하도록 하려면 muted(음소거) 속성과 함께 사용하는 것이 좋습니다.
<video width="300" height="200" controls autoplay muted> <source src="/html5/foo.mp4" type="video/mp4" /> </video>
또한 과도한 자동 재생은 사용자에게 불편함을 줄 수 있으므로, 배경 영상이나 광고 등 필요한 경우에만 신중하게 활용하는 것이 좋습니다.