HTML DOM Video paused 속성은 비디오가 현재 재생 중인지 여부에 따라 불리언 값(true/false)을 반환하는 읽기 전용 속성입니다. 비디오가 일시 정지 상태이면 true, 재생 중이면 false를 반환하므로, 자바스크립트에서 동영상의 재생 상태를 손쉽게 확인하고 제어할 수 있습니다.
구문
다음은 paused 속성을 사용하는 기본 구문입니다 −
mediaObject.paused
반환값: 비디오가 일시 정지 상태이면 true, 재생 중이면 false를 반환합니다.
예제
HTML DOM Video paused 속성의 실제 활용 예제를 살펴보겠습니다. 아래 코드는 비디오의 재생 상태에 따라 페이지 배경을 어둡게 하거나 밝게 전환하는 기능을 구현한 것입니다 −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video paused</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
.dimLight {
background-color: #000;
}
</style>
</head>
<body>
<form class="dimLight" id="formSelect">
<fieldset>
<legend>HTML-DOM-Video-paused</legend>
<div onclick="getTrackDetails()">
<video id="demo" width="320" controls><source src='https://www.tutorialspoint.com/html5/foo.mp4' type="video/mp4"></video><br>
</div></fieldset></form>
<script>
var formSelect = document.getElementById("formSelect");
var demo = document.getElementById("demo");
demo.autoplay = true;
function getTrackDetails() {
if(demo.paused)
formSelect.classList.add('dimLight');
else
formSelect.classList.remove('dimLight');
}
</script>
</body>
</html>
동작 원리
위 예제에서는 demo.autoplay = true로 설정하여 페이지가 로드되면 비디오가 자동으로 재생됩니다. 사용자가 비디오 영역을 클릭하면 getTrackDetails() 함수가 호출되어 demo.paused 값을 검사합니다. 비디오가 일시 정지 상태(paused가 true)이면 formSelect 요소에 dimLight 클래스를 추가해 배경을 검정색으로 변경하고, 반대로 재생 중이라면 해당 클래스를 제거하여 원래 상태로 되돌립니다.
출력 결과
비디오를 클릭해 일시 정지하기 전 −
비디오를 클릭해 일시 정지한 후 −
