HTML DOM의 Video defaultPlaybackRate 속성은 미디어의 기본 재생 속도(default playback rate)에 해당하는 숫자 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 동영상이 로드될 때 적용되는 기본 재생 배속을 프로그래밍 방식으로 제어할 수 있습니다.
문법(Syntax)
defaultPlaybackRate 속성의 사용 문법은 다음과 같습니다.
값 반환하기
현재 설정된 기본 재생 속도를 숫자로 반환합니다.
mediaObject.defaultPlaybackRate
값 설정하기
기본 재생 속도를 지정한 숫자 값으로 설정합니다.
mediaObject.defaultPlaybackRate = number
참고(주의사항) − 설정 값의 최대 허용치는 '16'이며, 값으로 '0.0'을 지정하면 오류가 발생합니다.
예제(Example)
다음은 Video defaultPlaybackRate 속성을 실제로 활용한 예제입니다. 버튼 클릭 시 재생 속도를 0.5씩 증가 또는 감소시켜 기본 재생 속도를 조절합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video defaultPlaybackRate</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-defaultPlaybackRate</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="느리게 (<<)">
<input type="button" onclick="getTrackDetails(2)" value="빠르게 (>>)">
<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 = '기본 재생 속도: '+demo.defaultPlaybackRate;
}
else{
demo.defaultPlaybackRate += 0.5;
demo.load();
divDisplay.textContent = '기본 재생 속도: '+demo.defaultPlaybackRate;
}
}
</script>
</body>
</html>실행 결과(Output)
'빠르게 (>>)' 버튼을 두 번 클릭했을 때의 결과입니다.
'느리게 (<<)' 버튼을 클릭했을 때의 결과입니다.
핵심 정리
- defaultPlaybackRate는 미디어의 기본 재생 배속을 나타내는 숫자 속성입니다.
- 속도 변경 후에는
load()메서드를 호출해야 변경 사항이 미디어에 반영됩니다. - 허용 범위는 최대 16까지이며, 0.0으로 설정하면 오류가 발생합니다.
- 현재 실시간 재생 속도를 제어하려면
playbackRate속성을 사용하고, 로드 시 기본값을 지정하려면defaultPlaybackRate를 사용합니다.