当前位置:主页 > 网页特效 > 播放器代码 >

HTML5超酷响应式视频背景动画特效

发布时间:2018/08/01 来源:互联网 浏览: 关键词:响应式 HTML5 动画效果 播放器代码 
HTML5超酷响应式视频背景动画特效 HTML5超酷响应式视频背景动画特效
阿里云

简要教程

这是一款HTML5超酷响应式视频背景动画特效。该视频背景可以将视频自适应屏幕的大小,制作出炫酷的动态视频背景效果。

使用方法

在页面中引入bideo.js文件。

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

HTML结构

该视频背景动画特效的基本HTML结构如下。

<divid="container">
  <videoid="background_video"loop muted></video>
  <divid="video_cover"></div>
  <divid="overlay"></div>
 
  <divid="video_controls">
    <spanid="play">
      <imgsrc="play.png">
    </span>
    <spanid="pause">
      <imgsrc="pause.png">
    </span>
  </div>
 
  <sectionid="main_content">
    <divid="head">
      <h1>Bideo.js</h1>
      <pclass="sub_head">HTML5超酷响应式视频背景动画特效</p>
    </div>
  </section>
</div>

JavaScript

在页面底部,使用下面的js代码来初始化该视频背景动画特效。

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

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top