bigvideo.js

/*
	BigVideo - The jQuery Plugin for Big Background Video (and Images)
	by John Polacek (@johnpolacek)
	
	Dual licensed under MIT and GPL.

    Dependencies: jQuery, jQuery UI (Slider), Video.js, ImagesLoaded
*/

;(function($) {

    $.BigVideo = function(options) {

        var defaults = {
			// If you want to use a single mp4 source, set this to true
			useFlashForFirefox:true,
			// If you are doing a playlist, the video won't play the first time
			// on a touchscreen unless the play event is attached to a user click
			forceAutoplay:false,
			controls:true
        };

        var BigVideo = this,
			player,
			vidEl = '#big-video-vid',
			wrap = $('<div id="big-video-wrap"></div>'),
			video = $(''),
			mediaAspect = 16/9,
			vidDur = 0,
			defaultVolume = 0.8,
			isInitialized = false,
			isSeeking = false,
			isPlaying = false,
			isQueued = false,
			isAmbient = false,
			doLoop = false,
			playlist = [],
			currMediaIndex,
			currMediaType;

        BigVideo.settings = $.extend({}, defaults, options);

        // If only using mp4s and browser is firefox, use flash fallback
        if (BigVideo.settings.useFlashForFirefox && (navigator.userAgent.toLowerCase().indexOf('firefox') != -1)) {
			VideoJS.options.techOrder = ['flash'];
		}

		function updateSize() {
			var windowW = $(window).width();
			var windowH = $(window).height();
			var windowAspect = windowW/windowH;
			if (windowAspect < mediaAspect) {
				// taller
				if (currMediaType === 'video') {
					player
						.width(windowH*mediaAspect)
						.height(windowH);
					$(vidEl)
						.css('top',0)
						.css('left',-(windowH*mediaAspect-windowW)/2);
					$(vidEl+'_html5_api').css('width',windowH*mediaAspect);
					$(vidEl+'_flash_api').css('width',windowH*mediaAspect);
				} else {
					// is image
					$('#big-video-image')
						.width(windowH*mediaAspect)
						.height(windowH)
						.css('top',0)
						.css('left',-(windowH*mediaAspect-windowW)/2);
				}
			} else {
				// wider
				if (currMediaType === 'video') {
					player
						.width(windowW)
						.height(windowW/mediaAspect);
					$(vidEl)
						.css('top',-(windowW/mediaAspect-windowH)/2)
						.css('left',0);
					$(vidEl+'_html5_api').css('width','100%');
					$(vidEl+'_flash_api').css('width','100%');
				} else {
					// is image
					$('#big-video-image')
						.width(windowW)
						.height(windowW/mediaAspect)
						.css('top',-(windowW/mediaAspect-windowH)/2)
						.css('left',0);
				}
			}
		}

		function initPlayControl() {
			// create video controller
			var markup = '<div id="big-video-control-container">';
			markup += '<div id="big-video-control">';
			markup += '<a href="#" id="big-video-control-play"></a>';
			markup += '<div id="big-video-control-middle">';
			markup += '<div id="big-video-control-bar">';
			markup += '<div id="big-video-control-bound-left"></div>';
			markup += '<div id="big-video-control-progress"></div>';
			markup += '<div id="big-video-control-track"></div>';
			markup += '<div id="big-video-control-bound-right"></div>';
			markup += '</div>';
			markup += '</div>';
			markup += '<div id="big-video-control-timer"></div>';
			markup += '</div>';
			markup += '</div>';
			$('body').append(markup);

			// hide until playVideo
			$('#big-video-control-container').css('display','none');

			// add events
			$('#big-video-control-track').slider({
				animate: true,
				step: 0.01,
				slide: function(e,ui) {
					isSeeking = true;
					$('#big-video-control-progress').css('width',(ui.value-0.16)+'%');
					player.currentTime((ui.value/100)*player.duration());
				},
				stop:function(e,ui) {
					isSeeking = false;
					player.currentTime((ui.value/100)*player.duration());
				}
			});
			$('#big-video-control-bar').click(function(e) {
				player.currentTime((e.offsetX/$(this).width())*player.duration());
			});
			$('#big-video-control-play').click(function(e) {
				e.preventDefault();
				playControl('toggle');
			});
			player.addEvent('timeupdate', function() {
				if (!isSeeking && (player.currentTime()/player.duration())) {
					var currTime = player.currentTime();
					var minutes = Math.floor(currTime/60);
					var seconds = Math.floor(currTime) - (60*minutes);
					if (seconds < 10) seconds='0'+seconds;
					var progress = player.currentTime()/player.duration()*100;
					$('#big-video-control-track').slider('value',progress);
					$('#big-video-control-progress').css('width',(progress-0.16)+'%');
					$('#big-video-control-timer').text(minutes+':'+seconds+'/'+vidDur);
				}
			});
		}

		function playControl(a) {
			var action = a || 'toggle';
			if (action === 'toggle') action = isPlaying ? 'pause' : 'play';
			if (action === 'pause') {
				player.pause();
				$('#big-video-control-play').css('background-position','-16px');
				isPlaying = false;

			} else if (action === 'play') {
				player.play();
				$('#big-video-control-play').css('background-position','0');
				isPlaying = true;
			}
		}

		function setUpAutoPlay() {
			player.play();
			$('body').off('click',setUpAutoPlay);
        }

		function nextMedia() {
			currMediaIndex++;
			if (currMediaIndex === playlist.length) currMediaIndex=0;
			playVideo(playlist[currMediaIndex]);
        }

        function playVideo(source) {
			// clear image
			$(vidEl).css('display','block');
			currMediaType = 'video';
			player.src(source);
			isPlaying = true;
			if (isAmbient) {
				$('#big-video-control-container').css('display','none');
				player.volume(0);
				doLoop = true;
			} else {
				$('#big-video-control-container').css('display','block');
				player.volume(defaultVolume);
				doLoop = false;
			}
        }

        function showPoster(source) {
			// remove old image
			$('#big-video-image').remove();

			// hide video
			player.pause();
			$(vidEl).css('display','none');
			$('#big-video-control-container').css('display','none');

			// show image
			currMediaType = 'image';
			var bgImage = $('<img id="big-video-image" src='+source+' />');
			wrap.append(bgImage);

			$('#big-video-image').imagesLoaded(function() {
				mediaAspect = $('#big-video-image').width() / $('#big-video-image').height();
				updateSize();
			});
        }

		BigVideo.init = function() {
			if (!isInitialized) {
				// create player
				$('body').prepend(wrap);
				var autoPlayString = BigVideo.settings.forceAutoplay ? 'autoplay' : '';
				player = $('<video id="'+vidEl.substr(1)+'" class="video-js vjs-default-skin" preload="auto" data-setup="{}" '+autoPlayString+' webkit-playsinline></video>');
				player.css('position','absolute');
				wrap.append(player);
				player = _V_(vidEl.substr(1), { 'controls': false, 'autoplay': true, 'preload': 'auto' });
				
				// add controls
				if (BigVideo.settings.controls) initPlayControl();
				
				// set initial state
				updateSize();
				isInitialized = true;
				isPlaying = false;

				if (BigVideo.settings.forceAutoplay) {
					$('body').on('click', setUpAutoPlay);
				}
				
				// set events
				$(window).resize(function() {
					updateSize();
				});

				player.addEvent('loadedmetadata', function(data) {
					if (document.getElementById('big-video-vid_flash_api')) {
						// use flash callback to get mediaAspect ratio
						mediaAspect = document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoWidth')/document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoHeight');
					} else {
						// use html5 player to get mediaAspect
						mediaAspect = $('#big-video-vid_html5_api').prop('videoWidth')/$('#big-video-vid_html5_api').prop('videoHeight');
					}
					updateSize();
					var dur = Math.round(player.duration());
					var durMinutes = Math.floor(dur/60);
					var durSeconds = dur - durMinutes*60;
					if (durSeconds < 10) durSeconds='0'+durSeconds;
					vidDur = durMinutes+':'+durSeconds;
				});
				
				player.addEvent('ended', function() {
					if (doLoop) {
						player.currentTime(0);
						player.play();
					}
					if (isQueued) {
						nextMedia();
					}
				});
			}
        };

        BigVideo.show = function(source,options) {
			isAmbient = (options !== undefined && options.ambient === true);
			if (typeof(source) === 'string') {
				var ext = source.substring(source.lastIndexOf('.')+1);
				if (ext === 'jpg' || ext === 'gif' || ext === 'png') {
					showPoster(source);
				} else {
					playVideo(source);
					isQueued = false;
				}
			} else {
				playlist = source;
				currMediaIndex = 0;
				playVideo(playlist[currMediaIndex]);
				isQueued = true;
			}
        };

        // Expose Video.js player
        BigVideo.getPlayer = function() {
			return player;
        };
    };

})(jQuery);