1/* 2 BigVideo - The jQuery Plugin for Big Background Video (and Images) 3 by John Polacek (@johnpolacek) 4 5 Dual licensed under MIT and GPL. 6 7 Dependencies: jQuery, jQuery UI (Slider), Video.js, ImagesLoaded 8*/ 9 10(function (factory) { 11 'use strict'; 12 if (typeof define === 'function' && define.amd) { 13 // Register as an anonymous AMD module: 14 define([ 15 'jquery', 16 'videojs', 17 'imagesloaded', 18 'jquery-ui' 19 ], factory); 20 } else { 21 factory(jQuery, videojs); 22 } 23})(function($, videojs) { 24 25 $.BigVideo = function(options) { 26 27 var defaults = { 28 // If you want to use a single mp4 source, set as true 29 useFlashForFirefox:true, 30 // If you are doing a playlist, the video won't play the first time 31 // on a touchscreen unless the play event is attached to a user click 32 forceAutoplay:false, 33 controls:false, 34 doLoop:false, 35 container:$('body'), 36 shrinkable:false 37 }; 38 39 var BigVideo = this, 40 player, 41 vidEl = '#big-video-vid', 42 wrap = $('<div id="big-video-wrap"></div>'), 43 video = $(''), 44 mediaAspect = 16/9, 45 vidDur = 0, 46 defaultVolume = 0.8, 47 isInitialized = false, 48 isSeeking = false, 49 isPlaying = false, 50 isQueued = false, 51 isAmbient = false, 52 playlist = [], 53 currMediaIndex, 54 currMediaType; 55 56 var settings = $.extend({}, defaults, options); 57 58 function updateSize() { 59 var containerW = settings.container.outerWidth() < $(window).width() ? settings.container.outerWidth() : $(window).width(), 60 containerH = settings.container.outerHeight() < $(window).height() ? settings.container.outerHeight() : $(window).height(), 61 containerAspect = containerW/containerH; 62 63 if (settings.container.is($('body'))) { 64 $('html,body').css('height',$(window).height() > $('body').css('height','auto').height() ? '100%' : 'auto'); 65 } 66 67 if (containerAspect < mediaAspect) { 68 // taller 69 if (currMediaType == 'video') { 70 player 71 .width(containerH*mediaAspect) 72 .height(containerH); 73 if (!settings.shrinkable) { 74 $(vidEl) 75 .css('top',0) 76 .css('left',-(containerH*mediaAspect-containerW)/2) 77 .css('height',containerH); 78 } else { 79 $(vidEl) 80 .css('top',-(containerW/mediaAspect-containerH)/2) 81 .css('left',0) 82 .css('height',containerW/mediaAspect); 83 } 84 $(vidEl+'_html5_api') 85 .css('width',containerH*mediaAspect) 86 .css('height',containerH); 87 $(vidEl+'_flash_api') 88 .css('width',containerH*mediaAspect) 89 .css('height',containerH); 90 } else { 91 // is image 92 $('#big-video-image') 93 .css({ 94 width: 'auto', 95 height: containerH, 96 top:0, 97 left:-(containerH*mediaAspect-containerW)/2 98 }); 99 } 100 } else { 101 // wider 102 if (currMediaType == 'video') { 103 player 104 .width(containerW) 105 .height(containerW/mediaAspect); 106 $(vidEl) 107 .css('top',-(containerW/mediaAspect-containerH)/2) 108 .css('left',0) 109 .css('height',containerW/mediaAspect); 110 $(vidEl+'_html5_api') 111 .css('width',$(vidEl+'_html5_api').parent().width()+"px") 112 .css('height','auto'); 113 $(vidEl+'_flash_api') 114 .css('width',containerW) 115 .css('height',containerW/mediaAspect); 116 } else { 117 // is image 118 $('#big-video-image') 119 .css({ 120 width: containerW, 121 height: 'auto', 122 top:-(containerW/mediaAspect-containerH)/2, 123 left:0 124 }); 125 } 126 } 127 } 128 129 function initPlayControl() { 130 // create video controls 131 var markup = ''+ 132 '<div id="big-video-control-container">'+ 133 '<div id="big-video-control">'+ 134 '<a href="#" id="big-video-control-play"></a>'+ 135 '<div id="big-video-control-middle">'+ 136 '<div id="big-video-control-bar">'+ 137 '<div id="big-video-control-bound-left"></div>'+ 138 '<div id="big-video-control-progress"></div>'+ 139 '<div id="big-video-control-track"></div>'+ 140 '<div id="big-video-control-bound-right"></div>'+ 141 '</div>'+ 142 '</div>'+ 143 ' <div id="big-video-control-timer"></div>'+ 144 '</div>'+ 145 '</div>'; 146 settings.container.append(markup); 147 148 // hide until playVideo 149 $('#big-video-control-container').css('display','none'); 150 $('#big-video-control-timer').css('display','none'); 151 152 // add events 153 $('#big-video-control-track').slider({ 154 animate: true, 155 step: 0.01, 156 slide: function(e,ui) { 157 isSeeking = true; 158 $('#big-video-control-progress').css('width',(ui.value-0.16)+'%'); 159 player.currentTime((ui.value/100)*player.duration()); 160 }, 161 stop:function(e,ui) { 162 isSeeking = false;
163 player.currentTime((ui.value/100)*player.duration()); 164 } 165 }); 166 $('#big-video-control-bar').click(function(e) { 167 player.currentTime((e.offsetX/$(this).width())*player.duration()); 168 }); 169 $('#big-video-control-play').click(function(e) { 170 e.preventDefault(); 171 playControl('toggle'); 172 }); 173 player.on('timeupdate', function() { 174 if (!isSeeking && (player.currentTime()/player.duration())) { 175 var currTime = player.currentTime(); 176 var minutes = Math.floor(currTime/60); 177 var seconds = Math.floor(currTime) - (60*minutes); 178 if (seconds < 10) seconds='0'+seconds; 179 var progress = player.currentTime()/player.duration()*100; 180 $('#big-video-control-track').slider('value',progress); 181 $('#big-video-control-progress').css('width',(progress-0.16)+'%'); 182 $('#big-video-control-timer').text(minutes+':'+seconds+'/'+vidDur); 183 } 184 }); 185 } 186 187 function playControl(a) { 188 var action = a || 'toggle'; 189 if (action == 'toggle') action = isPlaying ? 'pause' : 'play'; 190 if (action == 'pause') { 191 player.pause(); 192 $('#big-video-control-play').css('background-position','-16px'); 193 isPlaying = false; 194 195 } else if (action == 'play') { 196 player.play(); 197 $('#big-video-control-play').css('background-position','0'); 198 isPlaying = true; 199 } else if (action == 'skip') { 200 nextMedia(); 201 } 202 } 203 204 function setUpAutoPlay() { 205 player.play(); 206 settings.container.off('click',setUpAutoPlay); 207 } 208 209 function nextMedia() { 210 currMediaIndex++; 211 if (currMediaIndex === playlist.length) currMediaIndex=0; 212 playVideo(playlist[currMediaIndex]); 213 } 214 215 function playVideo(source) { 216 217 // clear image 218 $(vidEl).css('display','block'); 219 currMediaType = 'video'; 220 player.src(source); 221 isPlaying = true; 222 if (isAmbient) { 223 $('#big-video-control-container').css('display','none'); 224 player.ready(function(){ 225 player.volume(0); 226 }); 227 doLoop = true; 228 } else { 229 $('#big-video-control-container').css('display','block'); 230 player.ready(function(){ 231 player.volume(defaultVolume); 232 }); 233 doLoop = false; 234 } 235 $('#big-video-image').css('display','none'); 236 $(vidEl).css('display','block'); 237 } 238 239 function showPoster(source) { 240 // remove old image 241 $('#big-video-image').remove(); 242 243 // hide video 244 player.pause(); 245 $(vidEl).css('display','none'); 246 $('#big-video-control-container').css('display','none'); 247 248 // show image 249 currMediaType = 'image'; 250 var bgImage = $('<img id="big-video-image" src='+source+' />'); 251 wrap.append(bgImage); 252 253 $('#big-video-image').imagesLoaded(function() { 254 mediaAspect = $('#big-video-image').width() / $('#big-video-image').height(); 255 updateSize(); 256 }); 257 } 258 259 BigVideo.init = function() { 260 if (!isInitialized) { 261 // create player 262 settings.container.prepend(wrap); 263 var autoPlayString = settings.forceAutoplay ? 'autoplay' : ''; 264 player = $('<video id="'+vidEl.substr(1)+'" class="video-js vjs-default-skin" height="1" width="1" preload="auto" data-setup="{}" '+autoPlayString+' webkit-playsinline></video>'); 265 player.css('position','absolute'); 266 wrap.append(player); 267 268 var videoTechOrder = ['html5','flash']; 269 // If only using mp4s and on firefox, use flash fallback 270 var ua = navigator.userAgent.toLowerCase(); 271 var isFirefox = ua.indexOf('firefox') != -1; 272 if (settings.useFlashForFirefox && (isFirefox)) { 273 videoTechOrder = ['flash', 'html5']; 274 } 275 player = videojs(vidEl.substr(1), { 276 controls:false, 277 autoplay:true, 278 preload:'auto', 279 techOrder:videoTechOrder 280 }); 281 282 // add controls 283 if (settings.controls) initPlayControl(); 284 285 // set initial state 286 updateSize(); 287 isInitialized = true; 288 isPlaying = false; 289 290 if (settings.forceAutoplay) { 291 $('body').on('click', setUpAutoPlay); 292 } 293 294 $('#big-video-vid_flash_api') 295 .attr('scale','noborder') 296 .attr('width','100%') 297 .attr('height','100%'); 298 299 // set events 300 $(window).on('resize.bigvideo', function() { 301 updateSize(); 302 }); 303 304 player.on('loadedmetadata', function(data) { 305 if (document.getElementById('big-video-vid_flash_api')) { 306 // use flash callback to get mediaAspect ratio 307 mediaAspect = document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoWidth')/document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoHeight'); 308 } else { 309 // use html5 player to get mediaAspect 310 mediaAspect = $('#big-video-vid_html5_api').prop('videoWidth')/$('#big-video-vid_html5_api').prop('videoHeight'); 311 } 312 updateSize(); 313 var dur = Math.round(player.duration()); 314 var durMinutes = Math.floor(dur/60); 315 var durSeconds = dur - durMinutes*60; 316 if (durSeconds < 10) durSeconds='0'+durSeconds; 317 vidDur = durMinutes+':'+durSeconds; 318 }); 319 320 player.on('ended', function() { 321 if (settings.doLoop) { 322 player.currentTime(0); 323 player.play(); 324 } 325 if (isQueued) { 326 nextMedia(); 327 } 328 }); 329 } 330 }; 331 332 /** 333 * Show video or image file 334 * 335 * @param source: The file to show, can be: 336 * - an array with objects for video files types 337 * - a string to a single video file 338 * - a string to a image file 339 * @param options: An object with those possible attributes: 340 * - boolean "ambient" to set video to loop 341 * - function onShown 342 */ 343 BigVideo.show = function(source,options) { 344 if (options === undefined) options = {}; 345 isAmbient = options.ambient === true; 346 if (isAmbient || options.doLoop) settings.doLoop = true; 347 348 if (typeof(source) === 'string') { 349 // if input was a string, try show that image or video 350 var ext = ( source.lastIndexOf('?') > 0 ) ? source.substring(source.lastIndexOf('.')+1, source.lastIndexOf('?')) : source.substring( source.lastIndexOf('.')+1); 351 if (ext == 'jpg' || ext == 'gif' || ext == 'png') { 352 showPoster(source); 353 } else if (ext == 'mp4' || ext == 'ogg' || ext == 'ogv'|| ext == 'webm') { 354 playVideo(source); 355 if (options.onShown) options.onShown(); 356 isQueued = false;
357 } 358 } else if ($.isArray(source)) { 359 // if the input was an array, pass it to videojs 360 playVideo(source); 361 } else if (typeof(source) === "object" && source.src && source.type) { 362 // if the input was an object with valid attributes, wrap it in an 363 // array and pass it to videojs 364 playVideo([source]); 365 } else { 366 // fail without valid input 367 throw("BigVideo.show received invalid input for parameter source"); 368 } 369 }; 370 371 /** 372 * Show a playlist of video files 373 * 374 * @param files: array of elements to pass to BigVideo.show in sequence 375 * @param options: An object with those possible attributes: 376 * - boolean "ambient" to set video to loop 377 * - function onShown 378 */ 379 BigVideo.showPlaylist = function (files, options) { 380 if (!$.isArray(files)) { 381 throw("BigVideo.showPlaylist parameter files accepts only arrays"); 382 } 383 384 if (options === undefined) options = {}; 385 isAmbient = options.ambient === true; 386 if (isAmbient || options.doLoop) settings.doLoop = true; 387 388 playlist = files; 389 currMediaIndex = 0; 390 this.show(playlist[currMediaIndex]); 391 if (options.onShown) options.onShown(); 392 isQueued = true; 393 }; 394 395 // Expose Video.js player 396 BigVideo.getPlayer = function() { 397 return player; 398 }; 399 400 // Remove/dispose the player 401 BigVideo.remove = BigVideo.dispose = function() { 402 isInitialized = false; 403 404 wrap.remove(); 405 $(window).off('resize.bigvideo'); 406 407 if(player) { 408 player.off('loadedmetadata'); 409 player.off('ended'); 410 player.dispose(); 411 } 412 }; 413 414 // Expose BigVideoJS player actions play, pause, skip (if a playlist is available) 415 // Example: BigVideo.triggerPlayer('skip') 416 BigVideo.triggerPlayer = function(action){ 417 playControl(action); 418 }; 419 420 }; 421});
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.