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

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

멋지지 않나요?

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

구체적인 단계:

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

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

HTML 코드:

비디오 태그 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;

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

 
123465

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

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

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

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