HTML5 동적 비디오 배경 홈을 달성 : 실제에 웹 프런트 엔드 항목

당신은 그것의 홈 모션 비디오 배경으로 달성하고자하는? 이 문서 함께 H5 동적 비디오 배경을 달성하기 위해 당신을 데려 갈 것이다 배우고 함께 가자;

먼저 인터넷은 분명한 비디오 다운로드, 최고의 MP4 형식을 찾기 위해, 다운로드 음을 우리가 쓰기 코드를 새 HTML 파일을 만든 후 :

HTML 코드 :

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

포장 비디오 라벨, 소스는 루프 플레이어 대신 루프, 음소거 침묵을 나타내며, 소스 파일, 자동 재생 속성 자동 재생을 나타냅니다;

속성이 자동으로 재생되지 않는 자동 재생 추가하지 않을 경우, 페이지가 검은 색 화면이 표시됩니다;

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 위치 코드 이렇게 하단에만큼 0보다 작을 수 있다는 Z- 인덱스 값들을 제공하는 것을 잊지 않으며, 주로 비디오 셋트 폭 및 높이 또는 같은 들면, 전체 화면 재생 및 증폭 효과를 달성하기 위해 주로 효과가 없음;

우리의 모션 비디오의 배경이 완료 그래서 당신은 재생 속도를 설정하려면, 우리는 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 style="color:white">123465</h1>
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

(시간이 매우 긴 스크린 샷되지 않도록, 블로그는 사진의 크기에 대한 제한이 있기 때문에) 네, 외부 비디오 태그를 추가 한 다음 우리가 렌더링 등이다

HTML5 동적 비디오 배경 홈을 달성 : 실제에 웹 프런트 엔드 항목

추천