現在、Web ページの背景としてループを使用していますが、ビデオ ループがフェード インし、フェード インを繰り返さずにループを再生できるかどうか疑問に思っていました。ループは、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);