1/** 2 * @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ). 3 * Version: 0.2 4 * 5 * Licensed under MIT and GPLv2. 6 * 7 * Usage: $('body').videoBG(options); 8 * 9 */ 10 11(function( $ ){ 12 13 $.fn.videoBG = function( selector, options ) { 14 15 var options = {}; 16 if (typeof selector == "object") { 17 options = $.extend({}, $.fn.videoBG.defaults, selector); 18 } 19 else if (!selector) { 20 options = $.fn.videoBG.defaults; 21 } 22 else { 23 return $(selector).videoBG(options); 24 } 25 26 var container = $(this); 27 28 // check if elements available otherwise it will cause issues 29 if (!container.length) 30 return; 31 32 // container to be at least relative 33 if (container.css('position') == 'static' || !container.css('position')) 34 container.css('position','relative'); 35 36 // we need a width 37 if (options.width == 0) 38 options.width = container.width(); 39 40 // we need a height 41 if (options.height == 0) 42 options.height = container.height(); 43 44 // get the wrapper 45 var wrap = $.fn.videoBG.wrapper(); 46 wrap.height(options.height) 47 .width(options.width); 48 49 // if is a text replacement 50 if (options.textReplacement) { 51 52 // force sizes 53 options.scale = true; 54 55 // set sizes and forcing text out 56 container.width(options.width) 57 .height(options.height) 58 .css('text-indent','-9999px'); 59 } 60 else { 61 62 // set the wrapper above the video 63 wrap.css('z-index',options.zIndex+1); 64 } 65 66 // move the contents into the wrapper 67 wrap.html(container.clone(true)); 68 69 // get the video 70 var video = $.fn.videoBG.video(options); 71 72 // if we are forcing width / height 73 if (options.scale) { 74 75 // overlay wrapper 76 wrap.height(options.height) 77 .width(options.width); 78 79 // video 80 video.height(options.height) 81 .width(options.width); 82 } 83 84 // add it all to the container 85 container.html(wrap); 86 container.append(video); 87 88 return video.find("video")[0]; 89 } 90 91 // set to fullscreen 92 $.fn.videoBG.setFullscreen = function($el) { 93 var windowWidth = $(window).width(), 94 windowHeight = $(window).height(); 95 96 $el.css('min-height',0).css('min-width',0); 97 $el.parent().width(windowWidth).height(windowHeight); 98 // if by width 99 if (windowWidth / windowHeight > $el.aspectRatio) { 100 $el.width(windowWidth).height('auto'); 101 // shift the element up 102 var height = $el.height(); 103 var shift = (height - windowHeight) / 2; 104 if (shift < 0) shift = 0; 105 $el.css("top",-shift); 106 } else { 107 $el.width('auto').height(windowHeight); 108 // shift the element left 109 var width = $el.width(); 110 var shift = (width - windowWidth) / 2; 111 if (shift < 0) shift = 0; 112 $el.css("left",-shift); 113 114 // this is a hack mainly due to the iphone 115 if (shift === 0) { 116 var t = setTimeout(function() { 117 $.fn.videoBG.setFullscreen($el); 118 },500); 119 } 120 } 121 122 $('body > .videoBG_wrapper').width(windowWidth).height(windowHeight); 123 124 } 125 126 // get the formatted video element 127 $.fn.videoBG.video = function(options) { 128 129 $('html, body').scrollTop(-1); 130 131 // video container 132 var $div = $('<div/>'); 133 $div.addClass('videoBG') 134 .css('position',options.position) 135 .css('z-index',options.zIndex) 136 .css('top',0) 137 .css('left',0) 138 .css('height',options.height) 139 .css('width',options.width) 140 .css('opacity',options.opacity) 141 .css('overflow','hidden'); 142 143 // video element 144 var $video = $('<video/>'); 145 $video.css('position','absolute') 146 .css('z-index',options.zIndex) 147 .attr('poster',options.poster) 148 .css('top',0) 149 .css('left',0) 150 .css('min-width','100%') 151 .css('min-height','100%'); 152 153 if (options.autoplay) { 154 $video.attr('autoplay',options.autoplay); 155 } 156 157 // if fullscreen 158 if (options.fullscreen) { 159 $video.bind('canplay',function() { 160 // set the aspect ratio 161 $video.aspectRatio = $video.width() / $video.height(); 162 $.fn.videoBG.setFullscreen($video); 163 }) 164 165 // listen out for screenresize 166 var resizeTimeout; 167 $(window).resize(function() { 168 clearTimeout(resizeTimeout); 169 resizeTimeout = setTimeout(function() {
170 $.fn.videoBG.setFullscreen($video); 171 },100); 172 }); 173 $.fn.videoBG.setFullscreen($video); 174 } 175 176 177 // video standard element 178 var v = $video[0]; 179 180 // if meant to loop 181 if (options.loop) { 182 loops_left = options.loop; 183 184 // cant use the loop attribute as firefox doesnt support it 185 $video.bind('ended', function(){ 186 187 // if we have some loops to throw 188 if (loops_left) 189 // replay that bad boy 190 v.play(); 191 192 // if not forever 193 if (loops_left !== true) 194 // one less loop 195 loops_left--; 196 }); 197 } 198 199 // when can play, play 200 $video.bind('canplay', function(){ 201 202 if (options.autoplay) 203 // replay that bad boy 204 v.play(); 205 206 }); 207 208 209 // if supports video 210 if ($.fn.videoBG.supportsVideo()) { 211 212 // supports webm 213 if ($.fn.videoBG.supportType('webm')){ 214 215 // play webm 216 $video.attr('src',options.webm); 217 } 218 // supports mp4 219 else if ($.fn.videoBG.supportType('mp4')) { 220 221 // play mp4 222 $video.attr('src',options.mp4); 223 224 // $video.html('<source src="'.options.mp4.'" />'); 225 226 } 227 // throw ogv at it then 228 else { 229 230 // play ogv 231 $video.attr('src',options.ogv); 232 } 233 234 } 235 236 237 238 // image for those that dont support the video 239 var $img = $('<img/>'); 240 $img.attr('src',options.poster) 241 .css('position','absolute') 242 .css('z-index',options.zIndex) 243 .css('top',0) 244 .css('left',0) 245 .css('min-width','100%') 246 .css('min-height','100%'); 247 248 // add the image to the video 249 // if suuports video 250 if ($.fn.videoBG.supportsVideo()) { 251 // add the video to the wrapper 252 $div.html($video); 253 } 254 255 // nope - whoa old skool 256 else { 257 258 // add the image instead 259 $div.html($img); 260 } 261 262 // if text replacement 263 if (options.textReplacement) { 264 265 // force the heights and widths 266 $div.css('min-height',1).css('min-width',1); 267 $video.css('min-height',1).css('min-width',1); 268 $img.css('min-height',1).css('min-width',1); 269 270 $div.height(options.height).width(options.width); 271 $video.height(options.height).width(options.width); 272 $img.height(options.height).width(options.width); 273 } 274 275 if ($.fn.videoBG.supportsVideo()) { 276 v.play(); 277 } 278 return $div; 279 } 280 281 // check if suuports video 282 $.fn.videoBG.supportsVideo = function() { 283 return (document.createElement('video').canPlayType); 284 } 285 286 // check which type is supported 287 $.fn.videoBG.supportType = function(str) { 288 289 // if not at all supported 290 if (!$.fn.videoBG.supportsVideo()) 291 return false; 292 293 // create video 294 var v = document.createElement('video'); 295 296 // check which? 297 switch (str) { 298 case 'webm' : 299 return (v.canPlayType('video/webm; codecs="vp8, vorbis"')); 300 break; 301 case 'mp4' : 302 return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); 303 break; 304 case 'ogv' : 305 return (v.canPlayType('video/ogg; codecs="theora, vorbis"')); 306 break; 307 } 308 // nope 309 return false; 310 } 311 312 // get the overlay wrapper 313 $.fn.videoBG.wrapper = function() { 314 var $wrap = $('<div/>'); 315 $wrap.addClass('videoBG_wrapper') 316 .css('position','absolute') 317 .css('top',0) 318 .css('left',0); 319 return $wrap; 320 } 321 322 // these are the defaults 323 $.fn.videoBG.defaults = { 324 mp4:'', 325 ogv:'', 326 webm:'', 327 poster:'', 328 autoplay:true, 329 loop:true, 330 scale:false, 331 position:"absolute", 332 opacity:1, 333 textReplacement:false, 334 zIndex:0, 335 width:0, 336 height:0, 337 fullscreen:false, 338 imgFallback:true 339 } 340 341})( jQuery );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.