HTML5 멋진 반응형 비디오 배경 애니메이션 특수 효과-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5 멋진 반응형 비디오 배경 애니메이션 특수 효과

黄舟

Jan 18, 2017 pm 02:08 PM

간략한 튜토리얼

이것은 멋진 HTML5 반응형 비디오 배경 애니메이션 효과입니다. 이 비디오 배경은 비디오를 화면 크기에 맞게 조정하여 멋지고 역동적인 비디오 배경 효과를 만들 수 있습니다.

사용법

bido.js 파일을 페이지에 도입하세요.

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

로그인 후 복사

HTML 구조

비디오 배경 애니메이션 특수효과의 기본 HTML 구조는 다음과 같습니다.

<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>Bideo.js</h1>
      <p class="sub_head">HTML5超酷响应式视频背景动画特效</p>
    </div>
  </section>
</div>

로그인 후 복사

JavaScript

페이지 하단에서 다음 js 코드를 사용하여 비디오 배경 애니메이션 효과를 초기화합니다.

(function () {
 
  var bv = new Bideo();
  bv.init({
    // Video element
    videoEl: document.querySelector(&#39;#background_video&#39;),
 
    // Container element
    container: document.querySelector(&#39;body&#39;),
 
    // Resize
    resize: true,
 
    // autoplay: false,
 
    isMobile: window.matchMedia(&#39;(max-width: 768px)&#39;).matches,
 
    playButton: document.querySelector(&#39;#play&#39;),
    pauseButton: document.querySelector(&#39;#pause&#39;),
 
    // Array of objects containing the src and type
    // of different video formats to add
    src: [
      {
        src: &#39;vedio.mp4&#39;,
        type: &#39;video/mp4&#39;
      },
      {
        src: &#39;night.webm&#39;,
        type: &#39;video/webm;codecs="vp8, vorbis"&#39;
      }
    ],
 
    // What to do once video loads (initial frame)
    onLoad: function () {
      document.querySelector(&#39;#video_cover&#39;).style.display = &#39;none&#39;;
    }
  });
}());

로그인 후 복사

위 내용은 HTML5 멋진 반응형 비디오 배경 애니메이션 특수효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.