HTML DOM Video currentSrc 속성 – 사용법과 예제 코드 총정리

HTML DOM의 Video currentSrc 속성은 현재 재생 중인 비디오의 URL을 문자열 형태로 반환하는 속성입니다. 이 속성은 <video> 요소에서 실제로 선택되어 로드된 미디어 리소스의 절대 경로를 알려주기 때문에, 동영상 출처를 확인하거나 권한에 따라 URL 노출 여부를 제어하는 기능을 구현할 때 유용하게 활용됩니다.

문법(Syntax)

currentSrc 속성은 매개변수 없이 호출하며, 문자열 값을 반환합니다.

mediaObject.currentSrc

예제(Example)

다음은 HTML DOM Video currentSrc 속성을 활용한 실습 예제입니다. 입력 필드에 'admin'을 입력하면 비디오 URL이 표시되고, 그렇지 않으면 접근이 거부됩니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video currentSrc</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-currentSrc</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()" value="Get URL">
            <input type="text" id="textSelect" placeholder="Full Name...">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    var demo = document.getElementById("demo");
    function getTrackDetails() {
        if(textSelect.value === 'admin')
            divDisplay.textContent = 'Video URL: '+demo.currentSrc;
        else
            divDisplay.textContent = 'Cannot Provide URL, Unauthorized User';
    }
</script>
</body>
</html>

실행 결과(Output)

'Get URL' 버튼을 클릭해 보겠습니다. 현재 입력된 사용자가 admin이 아니므로 URL이 표시되지 않습니다.

HTML DOM Video currentSrc 속성 – 사용법과 예제 코드 총정리

사용자 이름으로 "admin"을 입력한 뒤 'Get URL' 버튼을 클릭하면 아래와 같이 비디오 URL이 정상적으로 출력됩니다.

HTML DOM Video currentSrc 속성 – 사용법과 예제 코드 총정리

참고 사항

currentSrc 속성은 <source> 태그로 여러 개의 미디어 소스를 지정했을 경우, 브라우저가 실제로 선택한 리소스의 URL만 반환한다는 점에서 src 속성과 차이가 있습니다. 또한 비디오가 아직 로드되지 않았다면 빈 문자열("")을 반환할 수 있습니다.