javascript - 背景全屏视频

Question

美好的一天。我试图找到一种在后台应用全屏视频的方法，就像这里的页面:spotify .我假设它可以在 HTML5 中完成，但是我试图按照 stackoverflow 的一些说明进行操作，但它对我不起作用。显然我不想要视频上的时间轴和其他控件，只是背景中的简单纯视频。到目前为止，我一直在尝试使用这个:

代码下面的jsFiddles

<style>
    #body{position:absolute; width:100%; height:100%}
    #myvideo{position:relative; top:0; left:0; width:100%; height:100%; z-index:-999;}
    #fullpage{width:80%; margin:0 auto; background-color:#900; z-index:100;}

</style>


<video width="100%" height="100%" autoplay="autoplay" id="myvideo">
  <source src="http://www.pete.dj/video/video.webm"></source>
  <source src="http://www.pete.dj/video/video.mp4"></source>
</video>


<script language="javascript">
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
</script>


<div id="fullpage">
    content goes here
</div>

但是效果不是很好。这是错误的地方:

1. 视频全高播放，不会拉伸(stretch)或调整大小以覆盖整个屏幕宽度
2. 视频在 chrome 上播放正常，但在其他浏览器上播放不正常，可能是什么原因？我认为 html5 允许在所有浏览器上播放。我有一种感觉，这不是编解码器或文件本身的问题。会不会是编码引起的？jsFiddle 在这里:fiddle1

在我设法解决了视频宽度的问题之后 - 然后它就不像背景那样显示了，因为滚动条出现了。我该怎么做才能摆脱由视频引起的滚动条？只有在实际#fullpage 需要时我才需要它们。不幸的是，#fullpage 在这种情况下也处于背景之后......而不是在它之上这是一个 fiddle :fiddle2

实际网站在这里:video test

感谢您的帮助和时间。

Answer 1

好的，这就是应该做的工作。它可能对将来的某人有用。:

(function( $ ){

    $.fn.videoBG = function( selector, options ) { 

        var options = {};
        if (typeof selector == "object") {
            options = $.extend({}, $.fn.videoBG.defaults, selector);
        }
        else if (!selector) {
            options = $.fn.videoBG.defaults;
        }
        else {
            return $(selector).videoBG(options);        
        }

        var container = $(this);

        // check if elements available otherwise it will cause issues
        if (!container.length)
            return;

        // container to be at least relative
        if (container.css('position') == 'static' || !container.css('position'))
            container.css('position','relative');

        // we need a width
        if (options.width == 0)
            options.width = container.width();

        // we need a height
        if (options.height == 0)
            options.height = container.height();    

        // get the wrapper
        var wrap = $.fn.videoBG.wrapper();
        wrap.height(options.height)
            .width(options.width);

        // if is a text replacement
        if (options.textReplacement) {

            // force sizes
            options.scale = true;

            // set sizes and forcing text out
            container.width(options.width)
                .height(options.height)
                .css('text-indent','-9999px');
        }
        else {

            // set the wrapper above the video
            wrap.css('z-index',options.zIndex+1);
        }

        // move the contents into the wrapper
        wrap.html(container.clone(true));

        // get the video
        var video = $.fn.videoBG.video(options);

        // if we are forcing width / height
        if (options.scale) {

            // overlay wrapper
            wrap.height(options.height)
                .width(options.width);

            // video
            video.height(options.height)
                .width(options.width);
        }

        // add it all to the container
        container.html(wrap);
        container.append(video);

        return video.find("video")[0];
    }

    // set to fullscreen
    $.fn.videoBG.setFullscreen = function($el) {
        var windowWidth = $(window).width(),
            windowHeight = $(window).height();

        $el.css('min-height',0).css('min-width',0);
        $el.parent().width(windowWidth).height(windowHeight);
        // if by width 
        if (windowWidth / windowHeight > $el.aspectRatio) {
            $el.width(windowWidth).height('auto');
            // shift the element up
            var height = $el.height();
            var shift = (height - windowHeight) / 2;
            if (shift < 0) shift = 0;
            $el.css("top",-shift);
        } else {
            $el.width('auto').height(windowHeight);         
            // shift the element left
            var width = $el.width();
            var shift = (width - windowWidth) / 2;
            if (shift < 0) shift = 0;
            $el.css("left",-shift);

            // this is a hack mainly due to the iphone
            if (shift === 0) {
                var t = setTimeout(function() {
                    $.fn.videoBG.setFullscreen($el);
                },500);
            }
        }

        $('body > .videoBG_wrapper').width(windowWidth).height(windowHeight);

    }

    // get the formatted video element
    $.fn.videoBG.video = function(options) {

        $('html, body').scrollTop(-1);

        // video container
        var $div = $('<div/>');
        $div.addClass('videoBG')
            .css('position',options.position)
            .css('z-index',options.zIndex)
            .css('top',0)
            .css('left',0)
            .css('height',options.height)
            .css('width',options.width)
            .css('opacity',options.opacity)
            .css('overflow','hidden');

        // video element
        var $video = $('<video/>');
        $video.css('position','absolute')
            .css('z-index',options.zIndex)
            .attr('poster',options.poster)
            .css('top',0)
            .css('left',0)
            .css('min-width','100%')
            .css('min-height','100%');

        if (options.autoplay) {
            $video.attr('autoplay',options.autoplay);
        }

        // if fullscreen
        if (options.fullscreen) {
            $video.bind('canplay',function() {
                // set the aspect ratio
                $video.aspectRatio = $video.width() / $video.height();
                $.fn.videoBG.setFullscreen($video);
            })

            // listen out for screenresize
            var resizeTimeout;
            $(window).resize(function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function() {
                    $.fn.videoBG.setFullscreen($video);
                },100); 
            });
            $.fn.videoBG.setFullscreen($video);
        }


        // video standard element
        var v = $video[0];

        // if meant to loop
        if (options.loop) {
            loops_left = options.loop;

            // cant use the loop attribute as firefox doesnt support it
            $video.bind('ended', function(){

                // if we have some loops to throw
                if (loops_left)
                    // replay that bad boy
                    v.play();

                // if not forever
                if (loops_left !== true)
                    // one less loop
                    loops_left--;
            });
        }

        // when can play, play
        $video.bind('canplay', function(){

            if (options.autoplay)
                // replay that bad boy
                v.play();

        });


        // if supports video
        if ($.fn.videoBG.supportsVideo()) {

            // supports webm
            if ($.fn.videoBG.supportType('webm')){

                // play webm
                $video.attr('src',options.webm);
            }
            // supports mp4
            else if ($.fn.videoBG.supportType('mp4')) {     

                // play mp4
                $video.attr('src',options.mp4);

            //  $video.html('<source src="'.options.mp4.'" />');

            }
            // throw ogv at it then
            else {

                // play ogv
                $video.attr('src',options.ogv);
            }

        }



        // image for those that dont support the video  
        var $img = $('<img/>');
        $img.attr('src',options.poster)
            .css('position','absolute')
            .css('z-index',options.zIndex)
            .css('top',0)
            .css('left',0)
            .css('min-width','100%')
            .css('min-height','100%');

        // add the image to the video
        // if suuports video
        if ($.fn.videoBG.supportsVideo()) {
            // add the video to the wrapper
            $div.html($video);
        }

        // nope - whoa old skool
        else {

            // add the image instead
            $div.html($img);
        }

        // if text replacement
        if (options.textReplacement) {

            // force the heights and widths
            $div.css('min-height',1).css('min-width',1);
            $video.css('min-height',1).css('min-width',1);
            $img.css('min-height',1).css('min-width',1);

            $div.height(options.height).width(options.width);
            $video.height(options.height).width(options.width);
            $img.height(options.height).width(options.width);   
        }

        if ($.fn.videoBG.supportsVideo()) {
            v.play();
        }
        return $div;
    }

    // check if suuports video
    $.fn.videoBG.supportsVideo = function() {
        return (document.createElement('video').canPlayType);
    }

    // check which type is supported
    $.fn.videoBG.supportType = function(str) {

        // if not at all supported
        if (!$.fn.videoBG.supportsVideo())
            return false;

        // create video
        var v = document.createElement('video');

        // check which?
        switch (str) {
            case 'webm' :
                return (v.canPlayType('video/webm; codecs="vp8, vorbis"'));
                break;
            case 'mp4' :
                return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
                break;
            case 'ogv' :
                return (v.canPlayType('video/ogg; codecs="theora, vorbis"'));
                break;          
        }
        // nope
        return false;   
    }

    // get the overlay wrapper
    $.fn.videoBG.wrapper = function() {
        var $wrap = $('<div/>');
        $wrap.addClass('videoBG_wrapper')
            .css('position','absolute')
            .css('top',0)
            .css('left',0);
        return $wrap;
    }

    // these are the defaults
    $.fn.videoBG.defaults = {
            mp4:'',
            ogv:'',
            webm:'',
            poster:'',
            autoplay:true,
            loop:true,
            scale:false,
            position:"absolute",
            opacity:1,
            textReplacement:false,
            zIndex:0,
            width:0,
            height:0,
            fullscreen:false,
            imgFallback:true
        }

})( jQuery );



$(document).ready(function() {


    $('body').videoBG({
        position:"fixed",
        zIndex:0,
        mp4:'http://www.pete.dj/video/video.mp4',
        ogv:'http://www.pete.dj/video/video.ogv',
        webm:'http://www.pete.dj/video/video.webm',
        poster:'http://www.pete.dj/video/video.jpg',
        opacity:1,
        fullscreen:true,
    });

})

jfiddle 在这里: jfiddle