HTML5에서 비디오 배경을 설정하는 방법 소개

웹페이지의 배경으로 동영상을 사용해야 하는 경우가 많은데, 오늘 설정해 보니 기본적으로 별로 좋지 않은 세부 사항이 있을 수 있습니다.

1단계: 준비

일을 잘하려면 먼저 도구를 갈고닦아야 합니다. 먼저 이런 영상을 준비해야 합니다. , 사진에 표시된 대로:

아름답지 않나요? 물론 제 아름다움은 아닙니다

2단계: 동영상 소개

여기서 동영상/태그를 사용해야 합니다. 소스에 비디오의 경로를 기록하고 자동 재생을 사용하여 자동으로 재생하도록 하고 음소거를 사용하여 루프에서 재생되도록 설정합니다. 원하지 않는 경우 더 추가할 수 있습니다. 더 추가하면 손실됩니다

<video id="v1" autoplay muted loop style="width: 100%">
    <source  src="mp4/loading.mp4">
</video>

3단계: 화면에 맞게 비디오를 조정합니다

위 단계는 현재 우리의 요구를 충족할 수 없으며 스크롤 막대가 있고 비디오가 화면을 차단할 것입니다. 우리가 표시하고 싶은 콘텐츠이지만 원하는 결과와는 거리가 멀습니다. 걱정하지 마세요. 제가 있습니다

video{
          position: fixed;
          right:0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          z-index: -9999;
          /*灰色调*/
          /*-webkit-filter:grayscale(100%)*/
 
      }

괜찮습니다. -webkit-filter:grayscale(100% ) 색상 톤을 조정하면 img에도 동일하게 적용됩니다

4단계: 비디오 재생 속도

비디오의 재생 속도 속성을 사용하여 비디오의 재생 속도를 제어할 수 있습니다. 배경 비디오를 느린 속도로 재생하려면 다음을 추가하면 됩니다. javascript

<script>
    var video= document.getElementById(&#39;v1&#39;);
    video.playbackRate = 0.5;
</script>

좋아요, 가서 멋진 배경을 설정하세요

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 입문을 방문하세요! !

위 내용은 HTML5에서 비디오 배경을 설정하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!