controls 속성이란?
HTML에서 오디오나 비디오 요소에 재생, 일시정지, 음량 조절, 진행 바 등의 기본 컨트롤을 포함하려면 controls 속성을 사용하면 됩니다. 이 속성은 불리언(Boolean) 속성으로, 별도의 값을 지정하지 않고 태그에 선언만 하면 브라우저가 자동으로 기본 미디어 컨트롤 UI를 표시합니다.
컨트롤을 지정하지 않으면 사용자가 재생 버튼을 누를 방법이 없어 오디오나 비디오가 화면에 표시되더라도 실질적으로 사용할 수 없게 되므로, 대부분의 경우 controls 속성을 함께 사용하는 것이 좋습니다.
사용 예제
다음 코드를 실행하면 controls 속성이 적용된 비디오 플레이어를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML video 태그</title> </head> <body> <p>온라인 컴파일러</p> <br /> <video width = "500" height = "300" controls> <source src = "/html/compileonline.mp4" type = "video/mp4"> 이 브라우저는 video 태그를 지원하지 않습니다. </video> </body> </html>
코드 설명
- <video> 태그: 비디오 콘텐츠를 삽입하는 요소로,
width와height속성으로 크기를 지정합니다. - controls 속성: 재생/일시정지 버튼, 음량 슬라이더, 전체 화면 버튼 등 브라우저 기본 컨트롤을 활성화합니다.
- <source> 태그: 재생할 미디어 파일의 경로(
src)와 형식(type)을 지정합니다. - 대체 텍스트:
<video>태그를 지원하지 않는 구형 브라우저를 위해 닫는 태그 앞에 안내 문구를 넣을 수 있습니다.
참고: 오디오에도 동일하게 적용
controls 속성은 비디오뿐 아니라 오디오 요소에도 그대로 사용할 수 있습니다.
<audio src = "/html/sample.mp3" controls> 이 브라우저는 audio 태그를 지원하지 않습니다. </audio>
이처럼 controls 속성 하나만 추가하면 별도의 JavaScript 없이도 완전한 미디어 플레이어 기능을 손쉽게 구현할 수 있습니다.