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