[HTML]video 태그에 포스터(썸네일) 이미지 넣기

 

html 

video 태그를 이용해서 영상을 생성하고, poster속성에 섬네일 이미지로 쓰일 이미지의 경로를 넣어준다.

<div class="video">
    <video width="100%" poster="포스터로 쓰일 이미지 경로" autoplay loop controls>
      <source src="비디오경로" type="video/mp4">
    </video>
</div>

 

poster 속성으로 넣은 이미지는 이미지가 로딩될때나 처음 로드되어 재생버튼을 누르기 전까지 보여줄 이미지이다.

포스터 이미지의 크기를 조절하려면 css를 이용해 조절해 줄 수 있다.

 

.video{
	width: 100%; 
    height: 768px; 
    overflow: hidden; 
    /*비디오를 해당 크기의 세로정렬 가운데를 위해 */
    display: flex; 
    justify-content: center; 
    align-items: center;
  	}
  
video[poster]{ 
	/* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */
    height:100%;
    width:100%;
    }

 

 

 

[html] - [html]Video 태그 IOS autoPlay --> playsinline

[javascript/javascript] - [Html] video 태그 영상재생 종료 후에 함수 호출하기(video 태그의 속성 이용)