1

我目前有一个循环作为我的网页背景,并且想知道视频循环是否可以淡入并且不会重复淡入而只是播放循环?循环是使用 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);
4

1 回答 1

3

因此,我做了一个快速原型,并且能够使用标准 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();
于 2012-04-22T09:22:55.450 回答