HTML DOM의 Video height 속성은 미디어(비디오) 요소의 높이를 픽셀(px) 단위 숫자 값으로 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 동영상 플레이어의 세로 크기를 동적으로 제어할 수 있습니다.
문법(Syntax)
height 속성의 기본 문법은 다음과 같습니다.
높이 값 반환하기 (픽셀 단위)
mediaObject.height
높이 값 설정하기 (픽셀 단위)
mediaObject.height = number
반환값은 항상 정수 형태의 픽셀 값이며, height 속성이 설정되지 않은 경우에는 0을 반환합니다.
예제 코드
아래 예제는 버튼을 클릭할 때마다 비디오의 높이가 50px씩 증가하고, 변경된 높이 값이 화면에 표시되는 실습 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video height</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-height</legend>
<video id="demo" width="320" height="50" controls><source src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Video Not Visible">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails() {
demo.height += 50;
divDisplay.textContent = 'Video height: '+demo.height;
}
</script>
</body>
</html>실행 결과
'Video Not Visible' 버튼을 클릭하기 전의 초기 화면입니다. 비디오는 기본 높이인 50px로 표시됩니다.
버튼을 3번 클릭한 후의 화면입니다. 클릭할 때마다 demo.height += 50 연산이 실행되어 높이가 50px씩 증가하며, 최종적으로 200px가 된 것을 확인할 수 있습니다.
정리
HTML DOM의 Video height 속성은 다음과 같은 특징을 가집니다.
- 미디어 요소의 높이를 픽셀 단위로 읽거나 쓸 수 있습니다.
- 속성 값을 읽으면 정수형 픽셀 값이 반환됩니다.
- height 속성이 HTML에서 지정되지 않았다면 0을 반환합니다.
- 자바스크립트를 통해 실시간으로 비디오 크기를 조절하는 동적 UI를 구현할 수 있습니다.
참고로 width 속성과 함께 사용하면 비디오 플레이어의 가로·세로 크기를 모두 유연하게 제어할 수 있으며, 반응형 웹 디자인에서도 유용하게 활용됩니다.