HTML video 태그 속성(비디오 배경 사용 방법)

1. video 태그

• 영상을 보여주는 태그
• controls 속성을 넣으면 재생 컨트롤 바가 생성
• source 태그를 사용할 경우 조금 더 호환성이 좋아진다.
  • ex) <source src = "비디오 경로" type="video/파일 형식(ex. mp4)">

<video controls>
  <source src="비디오 경로">
</video>

 

 

 

2. 비디오 태그의 속성

• muted 음소거
• autoplay 자동재생
  • 단 muted를 적어야 작동
     
• poster 썸네일이미지
• preload 영상 다운로드 속성 auto metadata none
  
  • metadata 초반 부분만 다운로드

<video autoplay muted loop poster="썸네일 경로" preload="metadata">
  <source src="비디오 경로">
</video>

 

 

 

3. 비디오를 배경으로 사용하는 방법

• autoplay로 자동 재생의 속성을 이용
• loop 속성을 이용하여 반복 재생을 하면 가능

<div class="video-box">
  <video class="video-container" autoplay muted loop>
    <source src="비디오 경로" type="video/mp4">
  </video>
<p>안녕하세요 심투의 블로그입니다.</p>
</div>

    .video-box {
        height: 500px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .video-container {
        position: absolute;
        width: 100%;
        z-index: -1;
    }