Your IP : 216.73.216.138
/*
BigVideo - The jQuery Plugin for Big Background Video (and Images)
by John Polacek (@johnpolacek)
Dual licensed under MIT and GPL.
Dependencies: jQuery, jQuery UI (Slider), Video.js, ImagesLoaded
*/
;(function($) {
$.BigVideo = function(options) {
var defaults = {
useFlashForFirefox:true,
forceAutoplay:false,
controls:false,
ambient:true,
doLoop:true,
container:$('.site-container'),
startAt: 0,
stopAt: 0,
splashURL:null,
endsplashURL:null
};
var BigVideo = this,
player,
vidEl = '#big-video-vid',
wrap = $('<div id="big-video-wrap"></div>'),
video = $(''),
mediaAspect = 16/9,
vidDur = 0,
defaultVolume = 0.8,
isInitialized = false,
isSeeking = false,
isPlaying = false,
isQueued = false,
isEnding = false,
playlist = [],
currMediaIndex,
currMediaType;
var settings = $.extend({}, defaults, options);
function updateSize() {
var windowW = $(window).width();
var windowH = $(window).height();
var windowAspect = windowW/windowH;
if (windowAspect < mediaAspect) {
// taller
if (currMediaType === 'video') {
player
.width(windowH*mediaAspect)
.height(windowH);
$(vidEl)
.css('top',0)
.css('left',-(windowH*mediaAspect-windowW)/2)
.css('height',windowH);
$(vidEl+'_html5_api').css('width',windowH*mediaAspect);
$(vidEl+'_flash_api')
.css('width',windowH*mediaAspect)
.css('height',windowH);
} else {
// is image
$('#big-video-image')
.css({
width: 'auto',
height: windowH,
top:0,
left:-(windowH*mediaAspect-windowW)/2
});
}
} else {
// wider
if (currMediaType === 'video') {
player
.width(windowW)
.height(windowW/mediaAspect);
$(vidEl)
.css('top',-(windowW/mediaAspect-windowH)/2)
.css('left',0)
.css('height',windowW/mediaAspect);
$(vidEl+'_html5_api').css('width','100%');
$(vidEl+'_flash_api')
.css('width',windowW)
.css('height',windowW/mediaAspect);
} else {
// is image
$('#big-video-image')
.css({
width: windowW,
height: 'auto',
top:-(windowW/mediaAspect-windowH)/2,
left:0
});
}
}
}
function initPlayControl() {
// create video controller
var markup = '<div id="big-video-control-container">';
markup += '<div id="big-video-control">';
markup += '<div id="big-video-control-mute"></div>';
markup += '<div id="big-video-control-unmute"></div>';
markup += '<div id="big-video-control-timer"></div>';
markup += '<a href="#" id="big-video-control-play"></a>';
markup += '<div id="big-video-control-middle">';
markup += '<div id="big-video-control-bar">';
markup += '<div id="big-video-control-bound-left"></div>';
markup += '<div id="big-video-control-progress"></div>';
markup += '<div id="big-video-control-track"></div>';
markup += '<div id="big-video-control-bound-right"></div>';
markup += '</div>';
markup += '</div>';
markup += '</div>';
markup += '</div>';
settings.container.after(markup);
// hide until playVideo
$('#big-video-control-container').css('display','none');
$('#big-video-control-mute').click(function(e) {
player.volume(0);
$(this).hide();
$('#big-video-control-unmute').show();
});
$('#big-video-control-unmute').click(function(e) {
player.volume(defaultVolume);
$(this).hide();
$('#big-video-control-mute').show();
});
// add events
$('#big-video-control-track').slider({
animate: true,
step: 0.01,
slide: function(e,ui) {
isSeeking = true;
$('#big-video-control-progress').css('width',(ui.value-0.16)+'%');
player.currentTime((ui.value/100)*player.duration());
},
stop:function(e,ui) {
isSeeking = false;
player.currentTime((ui.value/100)*player.duration());
}
});
$('#big-video-control-bar').click(function(e) {
player.currentTime((e.offsetX/$(this).width())*player.duration());
});
$('#big-video-control-play').click(function(e) {
e.preventDefault();
playControl('toggle');
});
}
function playControl(a) {
var action = a || 'toggle';
if (action === 'toggle') action = isPlaying ? 'pause' : 'play';
if (action === 'pause') {
player.pause();
$('#big-video-control-play').css('background-position','-16px');
isPlaying = false;
} else if (action === 'play') {
player.play();
$('#big-video-control-play').css('background-position','0');
isPlaying = true;
}
}
function setUpAutoPlay() {
player.play();
settings.container.off('click',setUpAutoPlay);
}
function nextMedia() {
currMediaIndex++;
if (currMediaIndex === playlist.length) currMediaIndex=0;
playVideo(playlist[currMediaIndex]);
}
function playVideo(source) {
// clear image
$(vidEl).css('display','block');
currMediaType = 'video';
player.src(source);
isPlaying = true;
$('#big-video-control-container').css('display', settings.controls ? 'block' : 'none');
player.ready(function(){
player.volume( settings.ambient ? 0 : defaultVolume);
});
$('#big-video-image').css('display','none');
$(vidEl).css('display','block');
}
function showPoster(source) {
// remove old image
$('#big-video-image').remove();
// hide video
player.pause();
$(vidEl).css('display','none');
$('#big-video-control-container').css('display','none');
// show image
currMediaType = 'image';
var bgImage = $('<img id="big-video-image" src='+source+' />');
wrap.append(bgImage);
$('#big-video-image').imagesLoaded(function() {
mediaAspect = $('#big-video-image').width() / $('#big-video-image').height();
updateSize();
});
}
function maybeChangePoster() {
if (settings.endSplashURL && !isEnding) {
isEnding = true;
$('.vjs-poster').css({
"background-image": "url("+settings.endSplashURL+")",
"background-repeat": "no-repeat",
"background-size": "cover" } );
$('#big-video-control-container').hide();
$(vidEl).find('.vjs-tech').fadeOut("slow", function() {
$('.vjs-poster').fadeIn();
});
}
}
BigVideo.init = function() {
if (!isInitialized) {
// create player
settings.container.before(wrap);
var autoPlayString = settings.forceAutoplay ? 'autoplay' : '';
var posterString = settings.splashURL ? ('poster="'+settings.splashURL+'"') : '';
var atts = 'width="1" height="1" class="video-js vjs-default-skin" preload="auto" '+autoPlayString+posterString+' webkit-playsinline data-setup="{}"';
var videoele = $('<video id="'+vidEl.substr(1)+'"'+atts+'></video>');
videoele.css('position','absolute');
wrap.append(videoele);
var videoTechOrder = ['html5','flash'];
// If only using mp4s and on firefox, use flash fallback
var ua = navigator.userAgent.toLowerCase();
var isFirefox = ua.indexOf('firefox') != -1;
if (settings.useFlashForFirefox && (isFirefox)) {
videoTechOrder = ['flash', 'html5'];
}
player = videojs(vidEl.substr(1), {
controls:false,
autoplay:true,
preload:'auto',
techOrder:videoTechOrder
});
// add controls
if (settings.controls) initPlayControl();
// set initial state
updateSize();
isInitialized = true;
isPlaying = false;
if (settings.forceAutoplay) {
$('body').on('click', setUpAutoPlay);
}
$('#big-video-vid_flash_api')
.attr('scale','noborder')
.attr('width','100%')
.attr('height','100%');
// set events
$(window).resize(function() {
updateSize();
});
player.on('loadedmetadata', function(data) {
if (document.getElementById('big-video-vid_flash_api')) {
// use flash callback to get mediaAspect ratio
mediaAspect = document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoWidth')/document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoHeight');
} else {
// use html5 player to get mediaAspect
mediaAspect = $('#big-video-vid_html5_api').prop('videoWidth')/$('#big-video-vid_html5_api').prop('videoHeight');
}
updateSize();
var dur = Math.round(player.duration());
var durMinutes = Math.floor(dur/60);
var durSeconds = dur - durMinutes*60;
if (durSeconds < 10) durSeconds='0'+durSeconds;
vidDur = durMinutes+':'+durSeconds;
player.currentTime(settings.startAt);
$(vidEl).find('.vjs-poster').fadeOut("slow", function() {
$(vidEl).find('.vjs-tech').fadeIn();
$(vidEl).find('.vjs-poster').css("background-image","none");
});
});
player.on('timeupdate', function() {
var currTime = Math.floor(player.currentTime());
var stopNow = settings.stopAt && (currTime == settings.stopAt);
if (settings.controls && !isSeeking && (player.currentTime()/player.duration())) {
var minutes = Math.floor(currTime/60);
var seconds = currTime - (60*minutes);
if (seconds < 10) seconds='0'+seconds;
var progress = player.currentTime()/player.duration()*100;
$('#big-video-control-track').slider('value',progress);
$('#big-video-control-progress').css('width',(progress-0.16)+'%');
$('#big-video-control-timer').text(minutes+':'+seconds+'/'+vidDur);
}
if (stopNow) {
if (settings.controls)
playControl('pause');
else
player.pause();
maybeChangePoster();
}
});
player.on('ended', function() {
if (settings.doLoop) {
player.currentTime(settings.startAt);
player.play();
} else if (isQueued) {
nextMedia();
} else {
maybeChangePoster();
}
});
}
};
BigVideo.show = function(source,options) {
if (options === undefined) options = {};
if (typeof(source) === 'string') {
var ext = source.substring(source.lastIndexOf('.')+1);
if (ext === 'jpg' || ext === 'gif' || ext === 'png') {
showPoster(source);
} else {
if (options.altSource && navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
source = options.altSource;
}
playVideo(source);
isQueued = false;
}
} else {
playlist = source;
currMediaIndex = 0;
playVideo(playlist[currMediaIndex]);
isQueued = true;
}
};
// Expose Video.js player
BigVideo.getPlayer = function() {
return player;
};
// Expose BigVideoJS player actions (like 'play', 'pause' and so on)
BigVideo.triggerPlayer = function(action){
playControl(action);
};
};
})(jQuery);