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