..

Search

poster

poster

<video> 태그의 poster 속성


HTML <video> 태그 ⇒


정의 및 특징

<video> 태그의 poster 속성은 비디오를 다운로드하는 동안이나 사용자가 재생 버튼을 누르기 전까지 비디오 대신 보여줄 이미지를 명시합니다.

 

만약 poster 속성이 명시되어 있지 않으면, 브라우저는 비디오의 첫 번째 프레임(frame)을 대신 보여줄 것입니다.


문법

<video poster="URL">


속성값

속성값   설명

URL

 

이미지 파일의 URL

 

1. 절대 주소(absolute URL)

ex) src=“http://www.tcpschool.com/poster.jpg”

2. 상대 주소(relative URL)

ex) src=“/media/poster.jpg”


예제
<video height="180" width="288" poster="/examples/images/tcpschool_logo.png" controls>
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

poster 3.0 지원함 9.0 3.6 3.1 10.5

HTML5에서 변경된 사항

<video> 태그는 HTML5에서 새롭게 추가된 요소입니다.


연습문제