HTML DOM의 Video load() 메서드는 비디오 요소의 속성이 자바스크립트 등으로 변경된 뒤, 그 변경 사항을 실제 화면에 반영하기 위해 비디오를 다시 불러올 때 사용됩니다. 대표적으로 'src'(재생 파일 경로) 같은 속성을 수정한 후에는 load()를 호출해야 새로운 값이 정상적으로 적용됩니다.
문법(Syntax)
load() 메서드의 기본 문법은 다음과 같습니다.
videoObject.load()
load() 메서드는 별도의 매개변수를 받지 않으며 반환값도 없습니다. 호출되는 즉시 현재 지정된 미디어 리소스를 처음부터 다시 선택하고 로드하며, 재생 위치도 초기화됩니다.
예제
아래 예제는 Video load() 메서드를 활용한 코드입니다. 버튼을 클릭하면 비디오의 defaultPlaybackRate(기본 재생 속도) 값을 조절한 뒤 load()를 호출하여 변경 사항을 즉시 적용합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video load()</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-load( )</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(1)" value="Slow (<<)">
<input type="button" onclick="getTrackDetails(2)" value="Fast (>>)">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails(val) {
if(val === 1){
demo.defaultPlaybackRate -= 0.5;
demo.load();
divDisplay.textContent = 'Default Playback Set: '+demo.defaultPlaybackRate;
}
else{
demo.defaultPlaybackRate += 0.5;
demo.load();
divDisplay.textContent = 'Default Playback Set: '+demo.defaultPlaybackRate;
}
}
</script>
</body>
</html>코드 설명
- 'Fast (>>)' 버튼: defaultPlaybackRate 값이 0.5씩 증가하여 재생 속도가 빨라집니다.
- 'Slow (<<)' 버튼: defaultPlaybackRate 값이 0.5씩 감소하여 재생 속도가 느려집니다.
- 속성 변경 후
demo.load()를 호출해야 수정된 재생 속도가 비디오에 실제로 반영됩니다.
실행 결과
'Fast (>>)' 버튼을 두 번 클릭한 경우 – 기본 재생 속도가 0.5씩 두 번 증가하여 배속 재생으로 설정됩니다.
'Slow (<<)' 버튼을 클릭한 경우 – 기본 재생 속도가 0.5 감소하여 느린 재생으로 전환됩니다.
정리
load() 메서드는 비디오의 src 교체, 재생 속도 변경 등 속성 수정 작업 이후 필수적으로 호출해야 하는 메서드입니다. 매개변수 없이 간단히 호출할 수 있으며, 호출 시점에 미디어가 처음 상태부터 다시 로드된다는 점을 기억하면 됩니다.