HTML에 video 추가하기

<div class="video-box">
  <video class="video-container" width="400"
    control autoplay muted loop poster="image/happyface.jpg">
    <source src="video/intro.webm" type="video/mp4">
    <source src="video/intro.mp4" type="video/mp4">
    죄송합니다 이 브라우저는 해당 비디오를 지원하지 않습니다.
  </video>
  <h4 class="video-title">소개영상</h4>
</div>

source 파일형식을 여러개 준비하면 상단의 source부터 재생시킨다.

안되면 차례로 밑에 있는 source를 재생시키므로, 브라우저 간 호환성을 확보할 수 있다.

맨 밑에 알림 메시지를 넣으면 비디오가 재생되지 않을때 메시지도 안내할 수 있다.

용량이 적은 source를 상단에 올려서 용량이 적은 video를 우선 재생하게 할 수 있다.

 

width - 비디오의 출력 너비 (px) 

height - 비디오의 출력 높이 (px)

control - 재생바 

autoplay muted - 자동재생 + 뮤트 , 자동재생 하려면 muted 와 같이 넣어야한다.

preload - 페이지 로드시 비디오 파일의 로딩 정도
             auto(페이지 로드시 비디오 파일도 함께 로드), metadata(메타데이터만 로드), none(로드하지 않음)
             기본값으로 metadata를 권장한다.

poster -  영상 재생 전 썸네일이미지를 보여준다.

loop  - 반복재생

 

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video