HTML DOM의 Video autoplay 속성은 웹 페이지가 로드될 때 해당 비디오가 자동으로 재생되는지 여부를 나타내는 불리언(Boolean) 값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 비디오의 자동 재생 여부를 동적으로 제어할 수 있습니다.
문법(Syntax)
autoplay 속성의 기본 문법은 다음과 같습니다.
1. 현재 값 반환하기 (true/false)
mediaObject.autoplay
2. autoplay 값 설정하기
mediaObject.autoplay = booleanValue
여기서 booleanValue에 들어갈 수 있는 값은 아래와 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 페이지가 로드될 때 비디오가 자동으로 재생됩니다. |
| false | 페이지가 로드되더라도 비디오가 자동으로 재생되지 않습니다. |
예제(Example)
다음은 Video autoplay 속성을 실제로 사용하는 예제입니다. 버튼을 클릭하면 autoplay 속성이 false로 변경되며, 화면에 현재 autoplay 상태가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video autoplay</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-autoplay</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="Disable Autoplay">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
demo.autoplay = true;
divDisplay.textContent = 'Autoplay: '+demo.autoplay;
function getTrackDetails() {
demo.autoplay = false;
demo.load();
divDisplay.textContent = 'Autoplay: '+demo.autoplay;
}
</script>
</body>
</html>실행 결과(Output)
'Disable Autoplay' 버튼을 클릭하기 전 − autoplay 속성이 true로 설정되어 있어 페이지 로드 시 비디오가 자동 재생됩니다.
'Disable Autoplay' 버튼을 클릭한 후 − autoplay 속성이 false로 변경되고, 이후에는 비디오가 자동으로 재생되지 않습니다.
참고 사항
최신 브라우저들은 사용자 경험 보호를 위해 음소거(muted) 상태가 아닌 비디오의 자동 재생을 차단하는 경우가 많습니다. 따라서 autoplay 속성을 사용할 때는 muted 속성과 함께 설정하는 것이 좋습니다.