HTML_video, audio

▶️ HTML에서 비디오 넣기

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

• muted는 음소거상태
• autoplay는 자동재생 (muted와 함께 넣어야 동작함)
• poster는 썸네일이미지
• preload는 영상을 먼저 다운을 받을지 말지를 선택가능하다. (auto, metadata, none 사용가능)

▶️ 비디오를 '배경'으로 쓰고싶다면

  <div class="video-box">
    <video class="video-container" autoplay muted loop>
      <source src="img/bridge.mp4" type="video/mp4">
    </video>
    <h3 class="video-title">Buy Our Shoes!</h3>
  </div>

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

  .video-container {
    position: absolute;
    width : 100%;
    top: 50%;
    left: 50%;
    transform : translate(-50%,-50%);
    z-index: 0;
  }

다소 유행은 지났지만, 다음과 같이 source 태그 레이아웃을 짜면 된다. video-container 의 top, left,tranform 속성을 다음과같이 부여하면 궁극의 가운데 정렬이 가능하다.