Exemplo de como implementar facilmente um plano de fundo de vídeo em tela cheia usando HTML5

Quer reproduzir um vídeo em tela cheia na sua página inicial? Este vídeo é usado como plano de fundo da página web e não afeta a navegação normal do conteúdo da web. Então deixe-me dizer que existe uma biblioteca Javascript que atende às suas necessidades, é a Bideo.js.

Ajuste automático: Bideo.js pode ajustar automaticamente o tamanho do vídeo de acordo com o tamanho da janela atual do navegador. Quando a janela do navegador é ajustada, ela se adapta ao tamanho da janela. Tanto o lado do celular quanto o do PC podem se ajustar automaticamente para que o vídeo. pode ser usado como plano de fundo e exibido em tela inteira.

Sobreposição: Depois que o vídeo for usado como plano de fundo da página web, podemos colocar qualquer conteúdo HTML em cima do vídeo.

Capa do vídeo: Quando a página é aberta, o vídeo pode demorar alguns segundos para carregar. Depois podemos definir uma imagem como capa do vídeo e esperar até que ela seja carregada antes de reproduzi-la.

Adicione o seguinte código HTML ao corpo da sua página Obviamente, a tag <video> é usada para carregar vídeos, o atributo loop refere-se ao loop do vídeo e muted refere-se ao modo mudo, ou seja, o volume é 0. #video_cover é a capa de vídeo padrão. #overlay é a camada de máscara na qual todo o conteúdo da página é exibido.

 <div id=container> <video id=background_video loop silenciado></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> <seção id=main_content> <div id=head> <h1>HTML5 implementa facilmente fundo de vídeo em tela cheia - Bideo.js</h1> <p class=sub_head>Uma biblioteca Javscript que pode facilmente adicionar vídeo de fundo em tela cheia à página </p> <p class=info>(Aguarde um momento, o vídeo demorará um pouco para carregar.)</p> </div> </section></div>

Também adicionamos #video_controls, que é usado para controlar a reprodução e pausa do vídeo, adequado para telefones celulares. Finalmente, você pode adicionar qualquer conteúdo HTML que deseja exibir na próxima seção.

CSS também é fundamental. As coisas mais importantes a serem observadas são as configurações de #container e #background_video. O seguinte código CSS pode ser obtido diretamente sem explicação:

 * {margem: 0; preenchimento: 0;}html, corpo { largura: 100%; altura: 100%; : 0; inferior: 0; altura: 100%;}#background_video { posição: topo absoluto: 50% esquerda: 50%; -50%); ajuste do objeto: capa; altura: 100%; largura: 100%;}#video_cover {posição: largura: 100%; -repeat; tamanho do fundo: capa; posição do fundo: centro;}#overlay {posição: topo absoluto: 0; rgb(0,0,0,0,5);}

Primeiro carregue a biblioteca Bideo:

 <script src=bideo.js></script>

Em seguida, instancie o bido: new Bideo(), inicialize o carregamento diretamente e defina as seguintes opções:

 (function () { var bv = new Bideo(); bv.init({ // Elemento de vídeo videoEl: document.querySelector('#background_video'), // Elemento de contêiner container: document.querySelector('body'), / / Redimensionamento de ajuste adaptativo: true, // reprodução automática: false, isMobile: window.matchMedia('(max-width: 768px)').matches, playButton: document.querySelector('#play'), pauseButton: document.querySelector('#pause'), // Carregue a fonte de vídeo e substitua seu próprio arquivo de fonte de vídeo de acordo com o negócio real 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', digite: 'video/mp4' }, { src: 'night.webm', digite: 'video/webm;codecs=vp8, vorbis' } ], // Assim que o vídeo for carregado, a capa do vídeo ficará oculta onLoad: function () { document.querySelector('#video_cover').style.display = 'none '; } } );}());

Assim, uma página de vídeo de fundo de alta aparência é concluída. Bem-vindo para visualizar a demonstração online e baixar o código-fonte. Para obter mais informações sobre Bideo.js, consulte o endereço do projeto github: https://github.com/rishabhp/bideo.js.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.