웹 페이지에 동영상을 삽입할 때, 비디오 파일이 완전히 다운로드되기 전까지 빈 화면이 보이는 경우가 많습니다. 이럴 때 HTML의 poster 속성을 사용하면 비디오가 로딩되는 동안 대신 표시할 대표 이미지(포스터)를 지정할 수 있습니다.
poster 속성이란?
poster 속성은 <video> 태그에 추가하며, 값으로 표시할 이미지의 URL을 입력합니다. 사용자가 재생 버튼을 누르거나 첫 프레임이 로드되기 전까지 이 이미지가 화면에 나타나므로, 썸네일이나 미리보기 이미지를 제공하기에 매우 유용합니다.
사용 예제
아래 코드를 실행하여 poster 속성이 실제로 어떻게 작동하는지 확인해 볼 수 있습니다.
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" poster = "https://www.tutorialspoint.com/images/logo.png" controls>
<source src = "/html5/foo.ogg" type = "video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
</body>
</html>코드 설명
- width / height: 비디오 플레이어의 가로 및 세로 크기를 픽셀 단위로 지정합니다.
- poster: 비디오가 다운로드되거나 재생되기 전까지 화면에 표시될 이미지의 경로를 설정합니다.
- controls: 재생, 일시정지, 음량 조절 등 기본 컨트롤 바를 표시합니다.
- <source>: 브라우저 호환성을 위해 여러 형식(Ogg, MP4)의 비디오 소스를 제공합니다.
참고 사항
포스터 이미지는 비디오와 어울리는 적절한 해상도를 사용하는 것이 좋으며, 이미지 파일이 너무 크면 오히려 로딩 속도가 느려질 수 있습니다. 또한 poster 속성을 생략하면 대부분의 브라우저는 비디오의 첫 번째 프레임을 자동으로 표시합니다.