[attribute] HTML - poster 속성 - 비디오태그용 포스터 지정 (= poster속성 = 포스터속성)

1. poster 예제 - 포스터 지정
2. poster 정의
3. poster 구문
4. poster 예제 - 포스터 사용 O/X 차이

poster 예제 - 포스터 지정

 

<video width="560" height="315" poster="/img/poster.jpg" controls>

   <source src="/file/movie.mp4" type="video/mp4">

   <source src="/file/movie.ogg" type="video/ogg">

   당신 브라우저는 video 태그 지원 X

</video>

 

poster 정의

 

영상 포스터 (= 영상 다운 중이거나 사용자가 play 버튼 누르기 전까지 보여지는 이미지) 지정.

 

---

 

1. poster 속성 사용 가능 태그 종류

<video>

 

2.

포스터 미지정 시, 영상의 첫 번째 프레임을 자동으로 사용. 예제

 

3.

IE9 이상 주요 최신 브라우저 모두 지원. 

 

poster 구문

 

<video poster="URL">...</video>

 

---

[속성값]

 

URL

포스터 이미지파일 주소. (※ 절대주소/상대주소 모두 사용 가능.)

 

poster 예제 - 포스터 사용 O/X 차이

[포스터 사용 O]

 

<video controls poster="https://source.unsplash.com/random">

   <source src="https://thumbs.gfycat.com/FoolhardyMiserlyAsiantrumpetfish-mobile.mp4" type="video/mp4">

   당신 브라우저는 video 태그 지원 X

</video>

 

결과보기

---

[포스터 사용 X]

 

<video controls>

   <source src="https://thumbs.gfycat.com/FoolhardyMiserlyAsiantrumpetfish-mobile.mp4" type="video/mp4">

   당신 브라우저는 video 태그 지원 X

</video>

 

결과보기