HTML DOM의 Video src 속성은 <video> 요소에 재생되는 동영상 파일의 URL을 나타내는 문자열을 반환하거나 설정하는 속성입니다. 이 속성을 활용하면 자바스크립트만으로 동영상 소스를 동적으로 확인하거나 변경할 수 있습니다.
구문(Syntax)
1. src 속성값 반환하기
mediaObject.src
2. src 속성에 URL 설정하기
mediaObject.src = URLString
반환 시에는 현재 지정된 동영상의 전체 URL이 문자열 형태로 돌아오며, 설정 시에는 새로운 URL 문자열을 할당하여 재생할 동영상을 교체할 수 있습니다.
예제(Example)
다음은 HTML DOM Video src 속성을 실제로 활용한 예제입니다. 입력 필드에 사용자 이름을 입력한 후 버튼을 클릭하면, 'admin' 계정인 경우에만 동영상 URL을 화면에 표시해 줍니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video src</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-src</legend>
<video id="demo" width="320" controls
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.src;
else
divDisplay.textContent = 'Cannot Provide URL, Unauthorized User';
}
</script>
</body>
</html>실행 결과(Output)
사용자 이름을 입력한 상태에서 'Get URL' 버튼을 클릭하면 다음과 같은 결과가 나타납니다.
위 화면에서 볼 수 있듯이, 일반 사용자가 URL을 요청하면 'Cannot Provide URL, Unauthorized User'(URL 제공 불가, 권한 없는 사용자)라는 메시지가 출력됩니다.
반면, 사용자 이름으로 “admin”을 입력한 후 'Get URL' 버튼을 클릭하면 URL 접근이 허용되어 동영상의 실제 주소가 표시됩니다.
정리
Video src 속성은 단순히 URL을 읽어오는 것뿐만 아니라, 런타임 중에 동영상 소스를 교체하는 용도로도 활용할 수 있습니다. 위 예제처럼 조건문과 결합하면 특정 사용자에게만 리소스 정보를 노출하는 간단한 접근 제어 로직도 구현할 수 있습니다.