HTML5视频作为网页背景淡入

Question

我目前有一个循环作为我的网页背景，并想知道视频循环是否可以淡入和也不重复淡入但只是播放循环？循环是使用HTML5视频背景jquery脚本的完整背景，我希望它首先淡入，然后继续循环。

感谢您的帮助！

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("body").videoBG({ 
            mp4:"SiteBackgroundVideos/SiteBackgroundVideo.mp4",
            ogg:"SiteBackgroundVideos/SiteBackgroundVideo.ogv",
            webm:"SiteBackgroundVideos/SiteBackgroundVideo.webm", videoVolume:0.8,
            pattern:"images/pattern.png", patternOpacity:0.8 
        });
    });  
</script>

---

我在 videoBG 中看到的唯一内容是jquery.video-background.js文件：

;(function($) {
$.fn.videoBG = function(settings) {

    //Default Variables
    var defaults = {
        autoplay:true,
        loop:true,
        //Video volume between 0 - 1
        videoVolume:1,
        //Aspect ratio
        aspectRatio:3,      //0:Normal, 1:Aspect, 2:Full, 3:Scale
        //Video Type
        mp4:false,
        webm:false,
        flv:false,
        ogg:false,
        //Mobile Video Type
        mp4Mobile:false,
        webmMobile:false,
        flvMobile:false,
        oggMobile:false,
        //Pattern
        pattern:"",
        patternOpacity:1,
        //Go to URL on video ended - You must set "loop:false" on top to run video ended event handler
        videoEndURL:""
    };

    //Settings
    var settings = $.extend({}, defaults, settings);        

    //HTML5
    var isHTML5 = false;

    //Mobile
    var isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) ? true : false;
    var videoAutoPlay = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i) ? false : true;

    //Mobile Videos
    if (settings.mp4 && !settings.mp4Mobile) {settings.mp4Mobile = settings.mp4;}
    if (settings.webm && !settings.webmMobile) {settings.webmMobile = settings.webm;}
    if (settings.flv && !settings.flvMobile) {settings.flvMobile = settings.flv;}
    if (settings.ogg && !settings.oggMobile) {settings.oggMobile = settings.ogg;}

    //Variables
    var win = $(window);
    var winW, winH;     
    var container = $(this);
    var video, objVideo;
    var videoW=0, videoH=0;
    var videoMask = $('<div class="video-bg-mask" />');
    var videoHolder = $('<div class="video-bg-holder" id="video-bg-holder" />');
    var videoPattern = $('<div class="video-pattern" />');
    var videoPreloader = $('<div class="video-preloader" />');
    var hidden = false;

    //Video Mask
    container.append(videoMask);

    //Video Holder
    videoMask.append(videoHolder);  

    //Window resize handler
    win.resize(resizeVideo);    

    if (Modernizr.video && (settings.mp4 || settings.webm || settings.ogg)) {           
        //HTML5 Video
        createHTML5();
    } else {
        //Flash
        var playerVersion = swfobject.getFlashPlayerVersion();
        if(playerVersion.major>9) {
            createFlash();
        }
    }

    //Create HTML5 video tag
    function createHTML5() {
        var src = "", type = "", error = false;
        //Video type
        if (Modernizr.video.h264 && settings.mp4) {
            src = !isMobile ? settings.mp4 : settings.mp4Mobile; 
            type = "video/mp4";
        } else if (Modernizr.video.ogg && settings.ogg) {
            src = !isMobile ? settings.ogg : settings.oggMobile; 
            type = "video/ogg";
        } else if (Modernizr.video.webm && settings.webm) {
            src = !isMobile ? settings.webm : settings.webmMobile; 
            type = "video/webm";
        } else {
            error = true;   
        }
        //Preloader
        videoMask.append(videoPreloader);
        //Video tag
        if (!error) {
            var attr =' preload="'+(isMobile ? "auto" : "metadata")+'"';
            if (settings.autoplay) {
                attr += ' autoplay="autoplay"';
            }   
            if (settings.loop) {
                attr += ' loop="loop"';
            }               
            var videoCode = '<video class="video-container" \
                                width="100%" height="100%" \
                                src="'+src+'" type="'+type+'\
                                "'+attr+'\
                             />';
            videoHolder.html(videoCode);
            objVideo = videoHolder.find(".video-container");
            video = objVideo[0];
            video.addEventListener("ended", videoEnded, false);
            video.addEventListener("loadedmetadata", videoMetadata, false);
            video.addEventListener("waiting", videoWaiting);
            video.addEventListener("playing", videoPlaying);
            video.load();
            isHTML5 = true;
        }           
    }

    //Video meta data
    function videoMetadata(e) {
        video.removeEventListener("loadedmetadata", videoMetadata, false);
        //Video dimensions
        videoW = video.videoWidth;
        videoH = video.videoHeight;
        //Pattern
        if (settings.pattern!="") {
            createPattern();
        }
        //Resize video
        resizeVideo();
        //Show video holder
        videoHolder.stop().animate({"opacity":1}, 500);
        //Set video volume
        video.volume = settings.videoVolume;
        if(!videoAutoPlay){
            video.play();
        }
    }

    //Video ended
    function videoEnded(e) {
        //Redirect to URL
        if (settings.videoEndURL!="") {
            goToUrl();
        }
    }

    //Video waiting
    function videoWaiting(e) {
        videoPreloader.fadeIn();
    }

    //Video playing
    function videoPlaying(e) {
        videoPreloader.fadeOut();
    }

    //Pattern
    function createPattern() {
        videoPattern.css({"background-image":"url("+settings.pattern+")", "opacity":settings.patternOpacity});
        videoMask.append(videoPattern);
    }

    //Create Flash video player
    function createFlash() {
        var src = "", error = false;
        if (settings.mp4) {
            src = !isMobile ? settings.mp4 : settings.mp4Mobile;                
        } else if (settings.flv) {
            src = !isMobile ? settings.flv : settings.flvMobile;                
        } else {
            error = true;   
        }           
        if (!error) {
            //Resize video
            resizeVideo();
            //Create video SWF
            var flashvars = {
                videoUrl:"../"+src,
                fullSizeView:(settings.aspectRatio+1),
                defaultVolume:settings.videoVolume,
                pattern:settings.pattern,
                patternAlpha:settings.patternOpacity,
                loop:settings.loop,
                videoEndURL:settings.videoEndURL                
            };
            var params = {
                scale:"noscale",
                allowFullScreen:"true",
                menu:"false",
                bgcolor:"#000000",
                wmode:"transparent"
            };
            var attributes = {
                name: "video-bg-swf"
            };
            swfobject.embedSWF("flash/videobg.swf", "video-bg-holder", "100%", "100%", "9", null, flashvars, params, attributes, callbackFlash);
            //Show video holder
            videoHolder.stop().animate({"opacity":1}, 500);
        }
    }

    //Call back Flash
    function callbackFlash(e) {
        video = document.getElementById(e.id);
    }

    //Go to URL
    function goToUrl(){
        window.location = settings.videoEndURL;
    }

    //Resize video
    function resizeVideo(e) {
        winW = win.width();
        winH = win.height();
        var xScale = winW/videoW,
        yScale = winH/videoH, 
        scale=1, w=0, h=0, x=0, y=0;
        switch (settings.aspectRatio) {
            case 0: //Normal
                if (winW<videoW || winH<videoH) {
                    scale = Math.min(xScale, yScale);                       
                }                   
                w = Math.ceil(videoW*scale);
                h = Math.ceil(videoH*scale);                    
                x = Math.ceil((winW-w)/2);
                y = Math.ceil((winH-h)/2);
                break;  
            case 1: //Aspect
                scale = Math.min(xScale, yScale);
                w = Math.ceil(videoW*scale);
                h = Math.ceil(videoH*scale);
                x = Math.ceil((winW-w)/2);
                y = Math.ceil((winH-h)/2);      
                break;
            case 2: //Full
                w = winW;
                h = winH;
                x = 0;
                y = 0;      
                break;
            case 3: //Scale
            default:
                scale = Math.max(xScale, yScale);
                w = Math.ceil(videoW*scale);
                h = Math.ceil(videoH*scale);
                x = Math.ceil((winW-w)/2);
                y = Math.ceil((winH-h)/2);  
                break;
        }
        if (isHTML5) {
            objVideo.css({"width":w+"px", "height":h+"px"});
            videoHolder.css({"left":x+"px", "top":y+"px"});
            if (settings.pattern!="") {
                videoPattern.css({"left":x+"px", "top":y+"px", "width":w+"px", "height":h+"px"});   
            }
        } else {
            videoHolder.css({"width":winW+"px", "height":winH+"px"});
        }           
    }

    /***
    JS call back functions
    ***/
    //Play - Pause
    function isPlaying() {
        if(isHTML5) {
            return !video.paused;
        } else {
            return video.isPlaying();
        }
    }

    videoBg_play = function() {
        if(isHTML5) {
            video.play();
        } else {
            video.resume();
        }
    };

    videoBg_pause = function() {
        video.pause();
    };

    videoBg_toggle_play = function() {
        if(isPlaying()) {
            videoBg_pause();
        } else {
            videoBg_play();
        }
    };  

    //Rewind
    videoBg_rewind = function() {
        if(isHTML5) {
            video.currentTime = 0;
        } else {
            video.rewind();
        }
    };

    //Mute - Unmute
    function isMuted() {
        if(isHTML5) {
            return !(video.volume);
        } else {
            return video.isMute();

        }
    }

    videoBg_mute = function(){
        if(isHTML5) {
            video.volume = 0;
        } else {
            video.mute();
        }
    };

    videoBg_unmute = function(){
        if(isHTML5) {
            video.volume = settings.videoVolume;
        } else {
            video.unmute();
        }
    };

    videoBg_toggle_sound = function(){
        if(isMuted()) {
            videoBg_unmute();
        } else {
            videoBg_mute();
        }
    };

    //Show - Hide
    videoBg_show = function(){
        videoBg_play();
        videoMask.stop().fadeTo(600, 1);
        hidden = false;
    };

    videoBg_hide = function(){
        videoBg_pause();
        videoMask.stop().fadeTo(600, 0);
        hidden = true;
    };      

    videoBg_toggle_hide = function(){
        if(hidden) {
            videoBg_show();
        } else {
            videoBg_hide();
        }
    };

};

})(jQuery);

Answer 1

所以，我做了一个快速原型，我能够使用标准的JQuery动画淡入HTML5 视频标签：

$("video").css('opacity', 0).animate( { opacity: 1 }, 'slow')

修改

也许“视频”选择器不起作用。试试这样：

$(document).ready(function() { 
    $("body").videoBG({ 
        mp4:"SiteBackgroundVideos/SiteBackgroundVideo.mp4",
        ogg:"SiteBackgroundVideos/SiteBackgroundVideo.ogv",
        webm:"SiteBackgroundVideos/SiteBackgroundVideo.webm", videoVolume:0.8,
        pattern:"images/pattern.png", patternOpacity:0.8 
    });
   $("body").css('opacity', 0).animate( { opacity: 1 }, 5000);
});  

编辑＃2

如果以上操作不起作用，请尝试此操作（这是源页面用于切换视频的方法）：

videoBg_toggle_hide();