HTML DOM의 Video controls 속성은 비디오의 표준 컨트롤(재생, 일시정지, 음량 조절 등)을 활성화할지 여부를 나타내는 불리언(Boolean) 값을 반환하거나 설정하는 속성입니다.
문법(Syntax)
controls 속성의 기본 문법은 다음과 같습니다.
불리언 값 반환하기
mediaObject.controls
컨트롤 설정하기
mediaObject.controls = booleanValue
여기서 booleanValue에 사용할 수 있는 값은 다음과 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 비디오에 표준 컨트롤이 표시됩니다. |
| false | 비디오에 표준 컨트롤이 표시되지 않습니다. |
예제(Example)
다음은 Video controls 속성을 활용한 실제 예제입니다. 사용자가 이름을 입력해야만 비디오 컨트롤이 활성화되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video controls</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-controls</legend>
<video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Watch Video">
<input type="text" id="textSelect" placeholder="Full Name...">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
var demo = document.getElementById("demo");
demo.controls = false;
function getTrackDetails() {
if(textSelect.value !== ''){
demo.controls = true;
divDisplay.textContent = 'Thank you '+textSelect.value;
}
else
divDisplay.textContent = 'Please Provide Full Name to enable video'+textSelect.value;
}
</script>
</body>
</html>실행 결과(Output)
입력 필드가 비어 있는 상태에서 'Watch Video' 버튼을 클릭한 경우:
이름 입력 필드가 비어 있으면 demo.controls = false로 설정되어 있기 때문에 비디오 컨트롤이 나타나지 않고, 이름을 입력하라는 안내 메시지만 화면에 출력됩니다.
입력 필드에 이름을 작성한 상태에서 'Watch Video' 버튼을 클릭한 경우:
사용자가 이름을 정상적으로 입력하면 demo.controls = true로 설정되어 비디오 하단에 재생, 일시정지, 음량 등의 표준 컨트롤이 활성화되며, 감사 인사 메시지가 함께 표시됩니다.
핵심 정리
Video controls 속성은 자바스크립트를 통해 동적으로 비디오 컨트롤의 표시 여부를 제어할 수 있는 유용한 기능입니다. 예를 들어 특정 조건(로그인, 약관 동의 등)을 충족했을 때만 사용자가 비디오를 조작할 수 있게 하는 시나리오에 활용할 수 있습니다.