HTML5는 동적 비디오 배경을 구현합니다.

먼저 구현된 렌더링을 살펴보겠습니다.

(학습 동영상 공유: html5 동영상 튜토리얼)

멋지지 않나요?

당신도 이 효과를 얻고 싶다면 저와 함께 배우세요.

구체적인 단계:

먼저 온라인에서 선명한 비디오를 찾아 다운로드합니다. 가급적이면 MP4 형식으로 다운로드하세요.

다운로드한 후 코드를 작성하기 위한 새 HTML 파일을 만듭니다.

HTML 코드:

		<video id="v1" autoplay loop muted>
  			<source src="./video2.mp4" type="video/mp4"  />
		</video>

비디오 태그 Wrapped, source는 소스 파일을 나타내고, autoplay 속성은 자동 재생을 나타내고, loop는 루프 재생을 나타내고, muted는 자동 재생을 나타냅니다.

css 코드:

 *{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); //背景灰度设置*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        }

css 코드는 주로 전체 재생 효과를 달성하기 위한 위치 지정 및 증폭에 사용됩니다. 주로 화면 재생에 사용됩니다. 비디오의 너비와 높이를 설정하고 z-index에 값을 지정하여 아래쪽에 배치할 수 있도록 하는 것을 잊지 마십시오.

이렇게 동적 비디오 배경이 완성됩니다. 재생 속도를 설정하려면 js 코드(비디오 태그와 id="v1" 속성)를 추가하면 됩니다.

        var video= document.getElementById('v1');
            video.playbackRate = 1.5;

그러면 어떻게 될까요? 페이지에 콘텐츠를 추가하시겠습니까?

		<video id="v1" autoplay loop muted>
  			<source src="./video2.mp4" type="video/mp4"  />
        </video>	
        <h1 id="">123465</h1>

예, 비디오 태그 외부에 추가하면 렌더링이 다음과 같이 보일 것입니다(블로그에서는 이미지 크기에 제한이 있으므로 스크린샷 시간이 그리 길지 않습니다):

아니요 아주 간단해요? 서둘러서 직접 시도해 보세요.

관련 권장 사항: html5 튜토리얼

위 내용은 HTML5는 동적 비디오 배경을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!