HTML DOM의 Video play() 메서드는 현재 미디어 콘텐츠를 재생할 때 사용합니다. 반대로 재생 중인 동영상을 멈추고 싶다면 pause() 메서드를 호출하면 됩니다. 이 두 메서드를 조합하면 자바스크립트만으로 동영상의 재생과 일시정지를 자유롭게 제어할 수 있습니다.
구문
play() 메서드의 기본 구문은 다음과 같습니다.
videoObject.play()
play() 메서드는 별도의 매개변수를 받지 않으며, 호출 즉시 해당 비디오 요소의 재생을 시작합니다.
예제
버튼 클릭으로 동영상을 재생하고 일시정지하는 Video play() 메서드의 실제 활용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video play()</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-play( )</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="setControls(1)" value="Play">
<input type="button" onclick="setControls(2)" value="Pause">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function setControls(val) {
if(val === 1){
demo.play();
divDisplay.textContent = '동영상이 재생 중입니다';
}
else{
demo.pause();
divDisplay.textContent = '동영상이 일시정지되었습니다';
}
}
</script>
</body>
</html>
코드 설명
setControls(1)이 호출되면demo.play()가 실행되어 동영상이 재생되고, 화면에는 '동영상이 재생 중입니다'라는 안내 문구가 표시됩니다.setControls(2)가 호출되면demo.pause()가 실행되어 동영상이 일시정지되고, '동영상이 일시정지되었습니다'라는 문구가 표시됩니다.divDisplay요소는 현재 재생 상태를 사용자에게 시각적으로 알려주는 역할을 합니다.
실행 결과
'Play' 버튼을 클릭한 경우 – 동영상이 재생됩니다.
'Pause' 버튼을 클릭한 경우 – 동영상이 일시정지됩니다.
참고 사항
일부 브라우저에서는 사용자 상호작용 없이 자동으로 play()를 호출하면 차단될 수 있습니다. 따라서 버튼 클릭처럼 사용자의 명확한 동작에 연결해 호출하는 것이 좋습니다. 또한 play()는 Promise 객체를 반환하므로, .catch()를 활용하면 재생 실패 시 오류를 처리할 수 있습니다.