목차
poster 예제 - 포스터 지정
poster 정의
poster 구문
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>
결과보기
주소 복사
랜덤 이동