全屏响应式背景视频插件 BIDEO.js

栏目分类：播放器    发布日期：2017-10-26    浏览次数：5664次     收藏

Bideo视频调用和配置方法

var bv = new Bideo();
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: 'night.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';
    }
});