bideo.js全屏视频背景js插件-BFW插件库

bideo.js全屏视频背景js插件
第一步引入bfwone
第二步执行插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["bideo"], function() {
                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: 'https://rishabhp.github.io/bideo.js/night.mp4',
                        type: 'video/mp4'
                    },
                        {
                            src: 'https://rishabhp.github.io/bideo.js/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';
                    }
                });
            });
        });
    </script>
    <style>

        * {
            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;
        }

        #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;
        }

        #video_controls {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }

        #play img {
            width: 100px;
        }
        #pause img {
            width: 90px;
        }
        #pause {
            display: none;
        }

@media (min-width: 768px) {
            #video_controls {
                display: none;
            }
        }

        /* Demo page specific styles */

        body {
            text-align: center;
            font-family: 'proxima-nova', Helvetica;
        }

        #container {
            height: 100%;
        }

        #overlay {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            font-size:40px;
            color:white;
            padding-top: 20%;
        }

        #main_content {
            z-index: 2;
            position: relative;
            display: inline-block;

            /* Vertical center */
            top: 50%;
            transform: translateY(-50%);
        }

        #main_content h1 {
            text-transform: uppercase;
            font-weight: 600;
            font-family: 'proxima-nova-condensed', Helvetica;
            color: #fff;
            font-size: 35px;
        }

        #main_content .sub_head {
            color: rgba(255,255,255,0.5);
            font-size: 18px;
        }

        #main_content .info {
            color: rgba(255,255,255,0.5);
            font-size: 12px;
            margin-top: 10px;
        }

        #links {
            margin-top: 50px;
        }

        #links a {
            border: 2px solid rgba(255,255,255,0.20);
            border-radius: 61px;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
            padding: 10px 25px;
            display: inline-block;
            margin-right: 15px;
        }

        #footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
        #footer a {
            color: rgba(255,255,255,0.5);
            text-decoration: none;
            margin: 10px;
            font-size: 12px;
        }
        #footer a:first-child {
            float: left;
        }
        #footer a:last-child {
            float: right;
        }
    </style>

</head>
<body>
    <video id="background_video" loop muted></video>
    <div id="video_cover">
       
    </div>
    <div id="overlay">
        Hello Bfw
    </div>
</body>
</html>
bideo.js全屏视频背景js插件

网友评论0

bideo.js

video.js

RecordRTC.js

videoconverter.js

soundjs.min.js

audio.min.js

jquery.vide.js

recorder.js

hls.js

typemoneky-min.js
