Want to play a video full screen on your homepage? This video is used as the background of the web page and does not affect the normal browsing of the web content. Then I tell you that there is a Javascript library that is just right for you, and it is Bideo.js.
Reference URL:
https://www.helloweba.net/javascript/544.html
http://www.sucaihuo.com/js/1440.html
characteristic
Automatic adjustment : Video.js can automatically adjust the video size according to the size of the current browser window. When the browser window is adjusted, it will adapt to the window size. It can be adjusted automatically on both mobile and PC, so that the video can be used as the background and displayed in full screen. .
Overlay : After the video is used as the background of the web page, we can arbitrarily place any HTML content on top of the video.
Video cover : When the page is opened, the video may take a few seconds to load, then we can set a picture as the cover of the video and play it after loading.
HTML
Add the following HTML code to your page body. Obviously, the <video>tag is used to load the video, and the attribute looprefers to the looping video, mutedwhich refers to the silent mode, that is, the volume is 0. #video_coveris the default video cover. #overlayis the mask layer on which all other page content is displayed.
<div id="container">
<video id="background_video" loop muted></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> <section id="main_content"> <div id="head"> <h1>HTML5轻松实现全屏视频背景-Bideo.js</h1> <p class="sub_head">一个可以轻松添加页面全屏背景视频的Javscript库</p> <p class="info">(稍等片刻，视频加载需要一点点时间.)</p> </div> </section> </div> We also added #video_controls, this is used to control video playback and pause, suitable for mobile phones. Finally, you can sectionadd any HTML content you want to display in the following sections.
CSS
CSS is also more critical, and the most important thing to pay attention to is the setting of #containerand #background_video. The following css code is taken directly without explanation:
* {
margin: 0; padding: 0;
}
html, body { width: 100%; height: 100%; overflow: hidden; } #container { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; } #background_video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%; } #video_cover { position: absolute; width: 100%; height: 100%; background: url('video_cover.jpeg') no-repeat; background-size: cover; background-position: center; } #overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.5); } Javascript
First load the Video library:
<script src="bideo.js"></script> Then instantiate bideo: new Bideo(), then initialize the loading directly, and set the following options:
(function () {
var bv = new Bideo(); bv.init({ // Video元素 videoEl: document.querySelector('#background_video'), // 容器元素 container: document.querySelector('body'), // 自适应调整 resize: true, // autoplay: 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', type: 'video/mp4' }, { src: 'night.webm', type: 'video/webm;codecs="vp8, vorbis"' } ], // 一旦视频加载后即将视频封面隐藏 onLoad: function () { document.querySelector('#video_cover').style.display = 'none'; } }); }()); Just like this, a background video page that looks tall is completed. Welcome to view the online demo DEMO and download the source code. For more information about Bideo.js, please check the github project address: https://github.com/rishabhp/bideo.js .