HTML DOM의 Video poster 속성은 비디오가 재생되기 전까지, 또는 네트워크 상태(networkState)가 '2'(NETWORK_LOADING)일 때까지 화면에 표시되는 대표 이미지의 URL에 해당하는 문자열을 반환하거나 설정하는 데 사용됩니다.
쉽게 말해, 사용자가 재생 버튼을 누르기 전에 비디오 영역에 보여질 썸네일 이미지를 자바스크립트로 읽어오거나 지정할 수 있는 속성입니다.
문법(Syntax)
poster 속성의 기본 문법은 다음과 같습니다.
문자열 값 반환하기
mediaObject.poster
poster 속성에 URL 문자열 설정하기
mediaObject.poster = URLString
poster 속성이 빈 문자열('')로 설정되어 있다면, 별도의 대표 이미지가 지정되지 않은 상태이며 이 경우 비디오의 첫 번째 프레임이 대신 표시됩니다.
예제(Example)
다음은 HTML DOM Video poster 속성을 실제로 활용하는 예제 코드입니다. 버튼을 클릭하면 비디오에 설정된 poster URL을 가져와 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video poster</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-poster</legend>
<video id="demo" width="320" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" poster='' type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Get Poster URL">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails() {
if(demo.poster === '')
divDisplay.textContent = 'No Poster, 1st frame of video used as poster';
else
divDisplay.textContent = 'Poster URL: ' + demo.poster;
}
</script>
</body>
</html>코드 설명
위 예제에서는 getTrackDetails() 함수가 버튼 클릭 시 실행되며, demo.poster 값이 빈 문자열인지 확인합니다. poster가 설정되어 있지 않으면 '대표 이미지가 없으며 비디오의 첫 번째 프레임이 사용된다'는 메시지를, 설정되어 있다면 해당 URL을 화면에 출력합니다.
실행 결과(Output)
'Get Poster URL' 버튼을 클릭하기 전 화면은 다음과 같습니다.
'Get Poster URL' 버튼을 클릭한 후에는 비디오에 설정된 poster URL 정보가 아래 영역에 표시됩니다.
정리
HTML DOM Video poster 속성을 활용하면 비디오 로딩 전에 보여질 대표 이미지를 동적으로 제어할 수 있습니다. 사용자 경험(UX) 측면에서 비디오 콘텐츠의 미리보기 이미지를 관리해야 하는 웹 프로젝트에서 유용하게 활용할 수 있습니다.