123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- /**
- * @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ).
- * Version: 0.2
- *
- * Licensed under MIT and GPLv2.
- *
- * Usage: $('body').videoBG(options);
- *
- */
- (function( $ ){
- $.fn.videoBG = function( selector, options ) {
- if (options === undefined) {
- options = {};
- }
- if (typeof selector === "object") {
- options = $.extend({}, $.fn.videoBG.defaults, selector);
- }
- else if (!selector) {
- options = $.fn.videoBG.defaults;
- }
- else {
- return $(selector).videoBG(options);
- }
- var container = $(this);
- // check if elements available otherwise it will cause issues
- if (!container.length) {
- return;
- }
- // container to be at least relative
- if (container.css('position') == 'static' || !container.css('position')) {
- container.css('position','relative');
- }
- // we need a width
- if (options.width === 0) {
- options.width = container.width();
- }
- // we need a height
- if (options.height === 0) {
- options.height = container.height();
- }
- // get the wrapper
- var wrap = $.fn.videoBG.wrapper();
- wrap.height(options.height)
- .width(options.width);
- // if is a text replacement
- if (options.textReplacement) {
- // force sizes
- options.scale = true;
- // set sizes and forcing text out
- container.width(options.width)
- .height(options.height)
- .css('text-indent','-9999px');
- }
- else {
- // set the wrapper above the video
- wrap.css('z-index',options.zIndex+1);
- }
- // move the contents into the wrapper
- wrap.html(container.clone(true));
- // get the video
- var video = $.fn.videoBG.video(options);
- // if we are forcing width / height
- if (options.scale) {
- // overlay wrapper
- wrap.height(options.height)
- .width(options.width);
- // video
- video.height(options.height)
- .width(options.width);
- }
- // add it all to the container
- container.html(wrap);
- container.append(video);
- return video.find("video")[0];
- };
- // set to fullscreen
- $.fn.videoBG.setFullscreen = function($el) {
- var windowWidth = $(window).width(),
- windowHeight = $(window).height();
- $el.css('min-height',0).css('min-width',0);
- $el.parent().width(windowWidth).height(windowHeight);
- // if by width
- var shift = 0;
- if (windowWidth / windowHeight > $el.aspectRatio) {
- $el.width(windowWidth).height('auto');
- // shift the element up
- var height = $el.height();
- shift = (height - windowHeight) / 2;
- if (shift < 0) {
- shift = 0;
- }
- $el.css("top",-shift);
- } else {
- $el.width('auto').height(windowHeight);
- // shift the element left
- var width = $el.width();
- shift = (width - windowWidth) / 2;
- if (shift < 0) {
- shift = 0;
- }
- $el.css("left",-shift);
- // this is a hack mainly due to the iphone
- if (shift === 0) {
- var t = setTimeout(function() {
- $.fn.videoBG.setFullscreen($el);
- },500);
- }
- }
- $('body > .videoBG_wrapper').width(windowWidth).height(windowHeight);
- };
- // get the formatted video element
- $.fn.videoBG.video = function(options) {
- $('html, body').scrollTop(-1);
- // video container
- var $div = $('<div/>');
- $div.addClass('videoBG')
- .css('position',options.position)
- .css('z-index',options.zIndex)
- .css('top',0)
- .css('left',0)
- .css('height',options.height)
- .css('width',options.width)
- .css('opacity',options.opacity)
- .css('overflow','hidden');
- // video element
- var $video = $('<video/>');
- $video.css('position','absolute')
- .css('z-index',options.zIndex)
- .attr('poster',options.poster)
- .css('top',0)
- .css('left',0)
- .css('min-width','100%')
- .css('min-height','100%');
- if (options.autoplay) {
- $video.attr('autoplay',options.autoplay);
- }
- // if fullscreen
- if (options.fullscreen) {
- $video.bind('canplay',function() {
- // set the aspect ratio
- $video.aspectRatio = $video.width() / $video.height();
- $.fn.videoBG.setFullscreen($video);
- });
- // listen out for screenresize
- var resizeTimeout;
- $(window).resize(function() {
- clearTimeout(resizeTimeout);
- resizeTimeout = setTimeout(function() {
- $.fn.videoBG.setFullscreen($video);
- },100);
- });
- $.fn.videoBG.setFullscreen($video);
- }
- // video standard element
- var v = $video[0];
- // if meant to loop
- if (options.loop) {
- loops_left = options.loop;
- // cant use the loop attribute as firefox doesnt support it
- $video.bind('ended', function(){
- // if we have some loops to throw
- if (loops_left) {
- // replay that bad boy
- v.play();
- }
- // if not forever
- if (loops_left !== true) {
- // one less loop
- loops_left--;
- }
- });
- }
- // when can play, play
- $video.bind('canplay', function(){
- if (options.autoplay) {
- // replay that bad boy
- v.play();
- }
- });
- // if supports video
- if ($.fn.videoBG.supportsVideo()) {
- // supports webm
- if ($.fn.videoBG.supportType('webm')){
- // play webm
- $video.attr('src',options.webm);
- }
- // supports mp4
- else if ($.fn.videoBG.supportType('mp4')) {
- // play mp4
- $video.attr('src',options.mp4);
- }
- // throw ogv at it then
- else {
- // play ogv
- $video.attr('src',options.ogv);
- }
- }
- // image for those that dont support the video
- var $img = $('<img/>');
- $img.attr('src',options.poster)
- .css('position','absolute')
- .css('z-index',options.zIndex)
- .css('top',0)
- .css('left',0)
- .css('min-width','100%')
- .css('min-height','100%');
- // add the image to the video
- // if suuports video
- if ($.fn.videoBG.supportsVideo()) {
- // add the video to the wrapper
- $div.html($video);
- }
- // nope - whoa old skool
- else {
- // add the image instead
- $div.html($img);
- }
- // if text replacement
- if (options.textReplacement) {
- // force the heights and widths
- $div.css('min-height',1).css('min-width',1);
- $video.css('min-height',1).css('min-width',1);
- $img.css('min-height',1).css('min-width',1);
- $div.height(options.height).width(options.width);
- $video.height(options.height).width(options.width);
- $img.height(options.height).width(options.width);
- }
- if ($.fn.videoBG.supportsVideo()) {
- v.play();
- }
- return $div;
- };
- // check if suuports video
- $.fn.videoBG.supportsVideo = function() {
- return (document.createElement('video').canPlayType);
- };
- // check which type is supported
- $.fn.videoBG.supportType = function(str) {
- // if not at all supported
- if (!$.fn.videoBG.supportsVideo()) {
- return false;
- }
- // create video
- var v = document.createElement('video');
- // check which?
- switch (str) {
- case 'webm' :
- return (v.canPlayType('video/webm; codecs="vp8, vorbis"'));
- case 'mp4' :
- return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
- case 'ogv' :
- return (v.canPlayType('video/ogg; codecs="theora, vorbis"'));
- }
- // nope
- return false;
- };
- // get the overlay wrapper
- $.fn.videoBG.wrapper = function() {
- var $wrap = $('<div/>');
- $wrap.addClass('videoBG_wrapper')
- .css('position','absolute')
- .css('top',0)
- .css('left',0);
- return $wrap;
- };
- // these are the defaults
- $.fn.videoBG.defaults = {
- mp4:'',
- ogv:'',
- webm:'',
- poster:'',
- autoplay:true,
- loop:true,
- scale:false,
- position:"absolute",
- opacity:1,
- textReplacement:false,
- zIndex:0,
- width:0,
- height:0,
- fullscreen:false,
- imgFallback:true
- };
- })( jQuery );
|