홈페이지에서 비디오를 전체 화면으로 재생하고 싶으십니까? 이 영상은 웹페이지의 배경화면으로 사용되며, 웹 콘텐츠의 정상적인 탐색에는 영향을 미치지 않습니다. 그렇다면 여러분의 필요에 맞는 Javascript 라이브러리가 있다는 것을 알려드리겠습니다. 바로 Bideo.js입니다.
특성자동 조정: Bideo.js는 현재 브라우저 창의 크기에 따라 비디오 크기를 자동으로 조정할 수 있습니다. 브라우저 창이 조정되면 모바일과 PC 모두 자동으로 조정되어 비디오가 표시됩니다. 배경으로 사용하고 전체 화면으로 표시할 수 있습니다.
오버레이: 비디오를 웹 페이지의 배경으로 사용한 후 비디오 위에 HTML 콘텐츠를 배치할 수 있습니다.
비디오 표지: 페이지가 열리면 비디오를 로드하는 데 몇 초가 걸릴 수 있습니다. 그런 다음 사진을 비디오 표지로 설정하고 재생하기 전에 로드될 때까지 기다립니다.
HTML페이지 본문에 다음 HTML 코드를 추가하세요. 분명히 <video> 태그는 비디오를 로드하는 데 사용되고, 속성 루프는 비디오 반복을 나타내며, muted는 음소거 모드, 즉 볼륨이 0임을 나타냅니다. #video_cover는 기본 동영상 표지입니다. #overlay는 다른 모든 페이지 콘텐츠가 표시되는 마스크 레이어입니다.
<div id=container> <video id=ground_video 루프 음소거></video> <div id=video_cover></div> <div id=overlay></div> <div id=video_controls> <span id=play> <img src=play.png> </span> <span id=pause> <img src=pause.png> </span> </div> <섹션 id=main_content> <div id=head> <h1>HTML5는 전체 화면 비디오 배경을 쉽게 구현합니다 - Bideo.js</h1> <p class=sub_head>페이지에 전체 화면 배경 비디오를 쉽게 추가할 수 있는 Javscript 라이브러리 </p> <p class=info>(잠깐만 기다려 주세요. 동영상을 로드하는 데 시간이 좀 걸립니다.)</p> </div> </section></div>
또한 휴대폰에 적합한 비디오 재생 및 일시 정지를 제어하는 데 사용되는 #video_controls도 추가했습니다. 마지막으로 다음 섹션에 표시하려는 HTML 콘텐츠를 추가할 수 있습니다.
CSSCSS도 중요합니다. 주의해야 할 가장 중요한 사항은 #container 및 #Background_video 설정입니다. 다음 CSS 코드는 설명 없이 직접 사용할 수 있습니다.
* { 여백: 0;}html, 본문 { 너비: 100%; 높이: 100%; 오버플로: 숨겨진;}#container { 오버플로: 숨겨진; 왼쪽: 0; : 0; 하단: 0; 높이: 100%;}# background_video { 위치: 절대; 상단: 50%; 변환(-50%, -50%); 높이: 100%; 너비: 100%;}#video_cover { 위치: 절대값: 100%; 높이: url('video_cover.jpeg') -반복; 배경 위치: 중앙;}#overlay { 위치: 절대: 0; 왼쪽: 0; rgba(0,0,0,0.5);} 자바스크립트먼저 Bideo 라이브러리를 로드합니다.
<script src=bideo.js></script>
그런 다음 bido: new Bideo()를 인스턴스화하고 로딩을 직접 초기화하고 다음 옵션을 설정합니다.
(function () { var bv = new Bideo(); bv.init({ // 비디오 요소 videoEl: document.querySelector('#Background_video'), // 컨테이너 요소 컨테이너: document.querySelector('body'), / / 적응형 조정 크기 조정: true, // 자동 재생: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), PauseButton: document.querySelector('#pause'), // 비디오 소스를 로드하고 실제 비즈니스에 따라 자신의 비디오 소스 파일을 교체합니다. src: [ { src: 'http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion -footage.mp4', 유형: 'video/mp4' }, { src: 'night.webm', 유형: 'video/webm;codecs=vp8, vorbis' } ], // 동영상이 로드되면 동영상 표지가 숨겨집니다. onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());이렇게 해서 멋진 배경 비디오 페이지가 완성되었습니다. 온라인 데모 DEMO를 보고 소스 코드를 다운로드해 보세요. Bideo.js에 대한 자세한 내용은 github 프로젝트 주소(https://github.com/rishabhp/bideo.js)를 참조하세요.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.