HTML DOM 비디오 객체 완벽 정리 – 주요 속성과 메서드 활용법

HTML DOM의 비디오(Video) 객체는 HTML 문서 내의 <video> 요소를 자바스크립트로 제어할 수 있게 해주는 인터페이스입니다. 이 객체를 활용하면 동영상 재생, 일시정지, 음소거, 재생 속도 조절 등 다양한 미디어 기능을 프로그래밍 방식으로 구현할 수 있습니다.

비디오 요소 생성하기

자바스크립트에서 <video> 요소를 동적으로 생성하려면 createElement() 메서드를 사용합니다.

var videoObject = document.createElement("VIDEO")

이렇게 생성된 videoObject는 아래 표에 정리된 다양한 속성들을 지원합니다.

비디오 객체의 주요 속성

속성	설명
audioTracks	사용 가능한 오디오 트랙 목록을 나타내는 AudioTrackList 객체를 반환합니다.
autoplay	동영상이 준비되는 즉시 자동으로 재생을 시작할지 여부를 설정하거나 반환합니다.
buffered	버퍼링된 동영상 구간을 나타내는 TimeRanges 객체를 반환합니다.
controller	현재 동영상의 미디어 컨트롤러를 나타내는 MediaController 객체를 반환합니다.
controls	재생/일시정지 등 컨트롤 UI를 화면에 표시할지 여부를 설정하거나 반환합니다.
crossOrigin	동영상의 CORS(교차 출처 리소스 공유) 설정값을 설정하거나 반환합니다.
currentSrc	현재 재생 중인 동영상의 URL을 반환합니다.
currentTime	현재 재생 위치(초 단위)를 설정하거나 반환합니다.
defaultMuted	기본적으로 동영상을 음소거 상태로 둘지 여부를 설정하거나 반환합니다.
defaultPlaybackRate	동영상의 기본 재생 속도를 설정하거나 반환합니다.
duration	동영상의 전체 길이(초 단위)를 반환합니다.
ended	동영상 재생이 끝났는지 여부를 반환합니다.
error	동영상의 오류 상태를 나타내는 MediaError 객체를 반환합니다.
height	동영상의 height 속성값을 설정하거나 반환합니다.
loop	재생이 끝날 때마다 처음부터 다시 반복 재생할지 여부를 설정하거나 반환합니다.
mediaGroup	해당 동영상이 속한 미디어 그룹의 이름을 설정하거나 반환합니다.
muted	동영상 소리를 끌지 여부를 설정하거나 반환합니다.
networkState	동영상의 현재 네트워크 상태를 반환합니다.
paused	동영상이 일시정지 상태인지 여부를 반환합니다.
playbackRate	동영상의 재생 속도를 설정하거나 반환합니다.
played	이미 재생된 동영상 구간을 나타내는 TimeRanges 객체를 반환합니다.
poster	동영상의 poster(포스터 이미지) 속성값을 설정하거나 반환합니다.
preload	동영상의 preload(사전 로딩) 속성값을 설정하거나 반환합니다.
readyState	동영상의 현재 준비 상태를 반환합니다.
seekable	탐색(seek)이 가능한 동영상 구간을 나타내는 TimeRanges 객체를 반환합니다.
seeking	사용자가 현재 동영상 내에서 탐색 중인지 여부를 반환합니다.
src	동영상의 src(소스 경로) 속성값을 설정하거나 반환합니다.
startDate	현재 시간 오프셋을 나타내는 Date 객체를 반환합니다.
textTracks	사용 가능한 자막 트랙 목록을 나타내는 TextTrackList 객체를 반환합니다.
videoTracks	사용 가능한 비디오 트랙 목록을 나타내는 VideoTrackList 객체를 반환합니다.
volume	동영상의 오디오 볼륨을 설정하거나 반환합니다.
width	동영상의 width 속성값을 설정하거나 반환합니다.

그중 하나인 networkState 속성의 실제 사용 예제를 살펴보겠습니다.

예제 1: networkState 속성 활용하기

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video networkState</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-networkState</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="setTrackDetails()" value="Set Source">
            <input type="button" onclick="getTrackDetails()" value="Get Network State">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var demo = document.getElementById("demo");
    var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
    function getTrackDetails() {
        divDisplay.textContent = 'Network State: ' + demo.networkState;
    }
    function setTrackDetails() {
        demo.src = srcOfMedia;
        demo.load();
    }
</script>
</body>
</html>

실행 결과

소스가 지정되지 않은 상태에서 'Get Network State' 버튼을 클릭하면 다음과 같이 네트워크 상태 값이 표시됩니다.

HTML DOM 비디오 객체 완벽 정리 – 주요 속성과 메서드 활용법

소스가 지정되었지만 브라우저가 아직 데이터를 다운로드 중인 상태에서 버튼을 클릭하면 다른 네트워크 상태 값이 출력됩니다.

HTML DOM 비디오 객체 완벽 정리 – 주요 속성과 메서드 활용법

비디오 객체의 주요 메서드

속성 외에도 videoObject는 다음과 같은 메서드를 제공합니다.

메서드	설명
addTextTrack()	동영상에 새로운 자막(텍스트) 트랙을 추가합니다.
canPlayType()	브라우저가 지정된 동영상 형식을 재생할 수 있는지 확인합니다.
load()	동영상 요소를 다시 로드하여 렌더링합니다.
play()	동영상 재생을 시작합니다.
pause()	재생 중인 동영상을 일시정지합니다.

이번에는 canPlayType() 메서드의 사용 예제를 살펴보겠습니다.

예제 2: canPlayType() 메서드 활용하기

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</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-canPlayType( )</legend>
            <video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
            <input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var demo = document.getElementById("demo");
    var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
    function getTrackDetails() {
        var ans = demo.canPlayType('video/mp4');
        if(ans !== ''){
            divDisplay.textContent = 'Browser supports mp4';
            demo.src = srcOfMedia;
            demo.load();
        }
        else
            divDisplay.textContent = 'Browser does not supports mp4';
    }
</script>
</body>
</html>

실행 결과

'Does Browser Supports video/mp4?' 버튼을 클릭하기 전 화면입니다.

HTML DOM 비디오 객체 완벽 정리 – 주요 속성과 메서드 활용법

버튼을 클릭한 후에는 브라우저의 mp4 지원 여부에 따라 결과가 표시되고, 지원하는 경우 해당 소스가 로드됩니다.

HTML DOM 비디오 객체 완벽 정리 – 주요 속성과 메서드 활용법

마무리

HTML DOM 비디오 객체를 활용하면 <video> 요소를 세밀하게 제어할 수 있습니다. 특히 networkState 속성으로 네트워크 로딩 상태를 모니터링하고, canPlayType() 메서드로 브라우저의 코덱 지원 여부를 사전에 확인하면 다양한 환경에서 안정적인 동영상 재생 기능을 구현할 수 있습니다.