HTML에서 미디어가 재생을 마친 후 자동으로 처음부터 다시 시작되도록 하려면 loop 속성을 사용하면 됩니다. 이 속성은 불리언(Boolean) 타입으로, <audio> 또는 <video> 태그에 추가하기만 하면 해당 미디어가 무한히 반복 재생됩니다.
loop 속성 사용 예제
아래 코드는 loop 속성을 적용하여 비디오가 끝날 때마다 자동으로 다시 재생되도록 구현한 예제입니다.
<!DOCTYPE HTML> <html> <body> <video width = "300" height = "200" controls loop> <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>
코드 설명
<video> 태그에 controls와 loop 두 가지 속성이 함께 지정되어 있습니다.
- controls: 재생, 일시정지, 음량 조절 등의 컨트롤 UI를 화면에 표시합니다.
- loop: 비디오가 마지막까지 재생된 후 자동으로 처음부터 다시 재생합니다.
또한 <source> 요소를 여러 개 사용하여 브라우저 호환성을 높였습니다. OGG 형식을 지원하지 않는 브라우저에서는 MP4 형식이 대신 재생됩니다.
참고 사항
loop 속성은 오디오 파일에도 동일하게 적용할 수 있으며, 별도의 JavaScript 코드 없이 HTML만으로 간단히 반복 재생 기능을 구현할 수 있다는 장점이 있습니다.