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 windowW = settings.container.width(); 60 var windowH = settings.container.height(); 61 var windowAspect = windowW/windowH; 62 63 if (windowAspect < mediaAspect) { 64 // taller 65 if (currMediaType === 'video') { 66 player 67 .width(windowH*mediaAspect) 68 .height(windowH); 69 if (settings.shrinkable == false) { 70 $(vidEl) 71 .css('top',0) 72 .css('left',-(windowH*mediaAspect-windowW)/2) 73 .css('height',windowH); 74 } else { 75 $(vidEl) 76 .css('top',-(windowW/mediaAspect-windowH)/2) 77 .css('left',0) 78 .css('height',windowW/mediaAspect); 79 }; 80 $(vidEl+'_html5_api').css('width',windowH*mediaAspect); 81 $(vidEl+'_flash_api') 82 .css('width',windowH*mediaAspect) 83 .css('height',windowH); 84 } else { 85 // is image 86 $('#big-video-image') 87 .css({ 88 width: 'auto', 89 height: windowH, 90 top:0, 91 left:-(windowH*mediaAspect-windowW)/2 92 }); 93 } 94 } else { 95 // wider 96 if (currMediaType === 'video') { 97 player 98 .width(windowW) 99 .height(windowW/mediaAspect); 100 $(vidEl) 101 .css('top',-(windowW/mediaAspect-windowH)/2) 102 .css('left',0) 103 .css('height',windowW/mediaAspect); 104 $(vidEl+'_html5_api').css('width',$(vidEl+'_html5_api').parent().width()+"px"); 105 $(vidEl+'_flash_api') 106 .css('width',windowW) 107 .css('height',windowW/mediaAspect); 108 } else { 109 // is image 110 $('#big-video-image') 111 .css({ 112 width: windowW, 113 height: 'auto', 114 top:-(windowW/mediaAspect-windowH)/2, 115 left:0 116 }); 117 } 118 } 119 } 120 121 function initPlayControl() { 122 // create video controller 123 var markup = '<div id="big-video-control-container">'; 124 markup += '<div id="big-video-control">'; 125 markup += '<a href="#" id="big-video-control-play"></a>'; 126 markup += '<div id="big-video-control-middle">'; 127 markup += '<div id="big-video-control-bar">'; 128 markup += '<div id="big-video-control-bound-left"></div>'; 129 markup += '<div id="big-video-control-progress"></div>'; 130 markup += '<div id="big-video-control-track"></div>'; 131 markup += '<div id="big-video-control-bound-right"></div>'; 132 markup += '</div>'; 133 markup += '</div>'; 134 markup += '<div id="big-video-control-timer"></div>'; 135 markup += '</div>'; 136 markup += '</div>'; 137 settings.container.append(markup); 138 139 // hide until playVideo 140 $('#big-video-control-container').css('display','none'); 141 $('#big-video-control-timer').css('display','none'); 142 143 // add events 144 $('#big-video-control-track').slider({ 145 animate: true, 146 step: 0.01, 147 slide: function(e,ui) { 148 isSeeking = true; 149 $('#big-video-control-progress').css('width',(ui.value-0.16)+'%'); 150 player.currentTime((ui.value/100)*player.duration()); 151 }, 152 stop:function(e,ui) { 153 isSeeking = false;
154 player.currentTime((ui.value/100)*player.duration()); 155 } 156 }); 157 $('#big-video-control-bar').click(function(e) { 158 player.currentTime((e.offsetX/$(this).width())*player.duration()); 159 }); 160 $('#big-video-control-play').click(function(e) { 161 e.preventDefault(); 162 playControl('toggle'); 163 }); 164 player.on('timeupdate', function() { 165 if (!isSeeking && (player.currentTime()/player.duration())) { 166 var currTime = player.currentTime(); 167 var minutes = Math.floor(currTime/60); 168 var seconds = Math.floor(currTime) - (60*minutes); 169 if (seconds < 10) seconds='0'+seconds; 170 var progress = player.currentTime()/player.duration()*100; 171 $('#big-video-control-track').slider('value',progress); 172 $('#big-video-control-progress').css('width',(progress-0.16)+'%'); 173 $('#big-video-control-timer').text(minutes+':'+seconds+'/'+vidDur); 174 } 175 }); 176 } 177 178 function playControl(a) { 179 var action = a || 'toggle'; 180 if (action === 'toggle') action = isPlaying ? 'pause' : 'play'; 181 if (action === 'pause') { 182 player.pause(); 183 $('#big-video-control-play').css('background-position','-16px'); 184 isPlaying = false; 185 186 } else if (action === 'play') { 187 player.play(); 188 $('#big-video-control-play').css('background-position','0'); 189 isPlaying = true; 190 } 191 } 192 193 function setUpAutoPlay() { 194 player.play(); 195 settings.container.off('click',setUpAutoPlay); 196 } 197 198 function nextMedia() { 199 currMediaIndex++; 200 if (currMediaIndex === playlist.length) currMediaIndex=0; 201 playVideo(playlist[currMediaIndex]); 202 } 203 204 function playVideo(source) { 205 206 // clear image 207 $(vidEl).css('display','block'); 208 currMediaType = 'video'; 209 player.src(source); 210 isPlaying = true; 211 if (isAmbient) { 212 $('#big-video-control-container').css('display','none'); 213 player.ready(function(){ 214 player.volume(0); 215 }); 216 doLoop = true; 217 } else { 218 $('#big-video-control-container').css('display','block'); 219 player.ready(function(){ 220 player.volume(defaultVolume); 221 }); 222 doLoop = false; 223 } 224 $('#big-video-image').css('display','none'); 225 $(vidEl).css('display','block'); 226 } 227 228 function showPoster(source) { 229 // remove old image 230 $('#big-video-image').remove(); 231 232 // hide video 233 player.pause(); 234 $(vidEl).css('display','none'); 235 $('#big-video-control-container').css('display','none'); 236 237 // show image 238 currMediaType = 'image'; 239 var bgImage = $('<img id="big-video-image" src='+source+' />'); 240 wrap.append(bgImage); 241 242 $('#big-video-image').imagesLoaded(function() { 243 mediaAspect = $('#big-video-image').width() / $('#big-video-image').height(); 244 updateSize(); 245 }); 246 } 247 248 BigVideo.init = function() { 249 if (!isInitialized) { 250 // create player 251 settings.container.prepend(wrap); 252 var autoPlayString = settings.forceAutoplay ? 'autoplay' : ''; 253 player = $('<video id="'+vidEl.substr(1)+'" class="video-js vjs-default-skin" preload="auto" data-setup="{}" '+autoPlayString+' webkit-playsinline></video>'); 254 player.css('position','absolute'); 255 wrap.append(player); 256 257 var videoTechOrder = ['html5','flash']; 258 // If only using mp4s and on firefox, use flash fallback 259 var ua = navigator.userAgent.toLowerCase(); 260 var isFirefox = ua.indexOf('firefox') != -1; 261 if (settings.useFlashForFirefox && (isFirefox)) { 262 videoTechOrder = ['flash', 'html5']; 263 } 264 player = videojs(vidEl.substr(1), { 265 controls:false, 266 autoplay:true, 267 preload:'auto', 268 techOrder:videoTechOrder 269 }); 270 271 // add controls 272 if (settings.controls) initPlayControl(); 273 274 // set initial state 275 updateSize(); 276 isInitialized = true; 277 isPlaying = false; 278 279 if (settings.forceAutoplay) { 280 $('body').on('click', setUpAutoPlay); 281 } 282 283 $('#big-video-vid_flash_api') 284 .attr('scale','noborder') 285 .attr('width','100%') 286 .attr('height','100%'); 287 288 // set events 289 $(window).on('resize.bigvideo', function() { 290 updateSize(); 291 }); 292 293 player.on('loadedmetadata', function(data) { 294 if (document.getElementById('big-video-vid_flash_api')) { 295 // use flash callback to get mediaAspect ratio 296 mediaAspect = document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoWidth')/document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoHeight'); 297 } else { 298 // use html5 player to get mediaAspect 299 mediaAspect = $('#big-video-vid_html5_api').prop('videoWidth')/$('#big-video-vid_html5_api').prop('videoHeight'); 300 } 301 updateSize(); 302 var dur = Math.round(player.duration()); 303 var durMinutes = Math.floor(dur/60); 304 var durSeconds = dur - durMinutes*60; 305 if (durSeconds < 10) durSeconds='0'+durSeconds; 306 vidDur = durMinutes+':'+durSeconds; 307 }); 308 309 player.on('ended', function() { 310 if (settings.doLoop) { 311 player.currentTime(0); 312 player.play(); 313 } 314 if (isQueued) { 315 nextMedia(); 316 } 317 }); 318 } 319 }; 320 321 BigVideo.show = function(source,options) { 322 if (options === undefined) options = {}; 323 isAmbient = options.ambient === true; 324 if (isAmbient || options.doLoop) settings.doLoop = true; 325 if (typeof(source) === 'string') {
326 var ext = source.substring(source.lastIndexOf('.')+1); 327 if (ext === 'jpg' || ext === 'gif' || ext === 'png') { 328 showPoster(source); 329 } else { 330 if (options.altSource && navigator.userAgent.toLowerCase().indexOf('firefox') > -1) { 331 source = options.altSource; 332 } 333 playVideo(source); 334 options.onShown && options.onShown(); 335 isQueued = false; 336 } 337 } else { 338 playlist = source; 339 currMediaIndex = 0; 340 playVideo(playlist[currMediaIndex]); 341 options.onShown && options.onShown(); 342 isQueued = true; 343 } 344 }; 345 346 // Expose Video.js player 347 BigVideo.getPlayer = function() { 348 return player; 349 }; 350 351 // Remove/dispose the player 352 BigVideo.remove = BigVideo.dispose = function() { 353 isInitialized = false; 354 355 wrap.remove(); 356 $(window).off('resize.bigvideo'); 357 358 if(player) { 359 player.off('loadedmetadata'); 360 player.off('ended'); 361 player.dispose(); 362 } 363 }; 364 365 // Expose BigVideoJS player actions (like 'play', 'pause' and so on) 366 BigVideo.triggerPlayer = function(action){ 367 playControl(action); 368 }; 369 370 }; 371 372});
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.