https://mankato.mnsu.edu/static/js/jquery.background-video.js?v=1.0.0.0

1// The MIT License (MIT)
2
3// Copyright (c) 2015 BG Stock - html5backgroundvideos.com
4
5// Permission is hereby granted, free of charge, to any person obtaining a copy
6// of this software and associated documentation files (the "Software"), to deal
7// in the Software without restriction, including without limitation the rights
8// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9// copies of the Software, and to permit persons to whom the Software is
10// furnished to do so, subject to the following conditions:
11
12// The above copyright notice and this permission notice shall be included in all
13// copies or substantial portions of the Software.
14
15// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21// SOFTWARE.
22
23(function($) {
24
25	// Add js class to html
26	$('html').addClass('js');
27
28	// Add IE8 shim for Date.now()
29	if (!Date.now) {
30		Date.now = function() { return new Date().getTime(); }
31	}
32
33	// Return current time in seconds
34	function currentTime() {
35		return Math.floor(Date.now() / 1000);
36	}
37
38	// The plugin
39	$.fn.bgVideo = function( options ) {
40
41		// @bool iOS
42		var iOS = /iPad|iPhone|iPod/.test(navigator.platform) || /iPad|iPhone|iPod/.test(navigator.userAgent);
43
44		// Settings
45		var settings = $.extend({}, $.fn.bgVideo.defaults, options );
46
47		// Do the things
48		return this.each(function() {
49
50			// Set some handy variables
51			var $video = $(this); // jQuery Object
52			var video = $video[0]; // DOM node
53			var poster = $video.attr('poster') || '';
54			var $container = $video.parent();
55			var $pauseplay = $('<button class="jquery-background-video-pauseplay pause"><span>Pause</span></button>');
56			var start_time; // We'll set this when it starts playing
57
58
59			// Check for any data attributes that will override the settings for this particular element
60			var el_settings = $.extend({}, settings);
61			var data_attrs = $video.data();
62			$.each( data_attrs, function( data_name, data_val ) {
63				if( data_name.indexOf('bgvideo') === 0 ) {
64					// It's a match! Strip the bgvideo prefix and lowercase the first letter
65					data_name = data_name.replace('bgvideo', '');
66					data_name = data_name.charAt(0).toLowerCase() + data_name.slice(1);
67					// Then set the setting
68					el_settings[data_name] = data_val;
69				}
70			});
71
72
73			// Attach to playing event
74			$video.on('playing', function(){
75				if(start_time == null){
76					start_time = currentTime();
77				}
78				$video.addClass('is-playing is-visible');
79				$pauseplay.removeClass('play').addClass('pause').find('span').text('Pause');
80				$.fn.bgVideo.fitVideo( $video );
81			});
82
83
84			// If the video is already playing before js loads
85			if( video.currentTime > 0 ) {
86				$video.addClass('is-playing is-visible');
87			}
88
89
90			// Attach to pause event
91			$video.on('pause', function(){
92				$video.removeClass('is-playing');
93				$pauseplay.removeClass('pause').addClass('play').find('span').text('Play');
94				if(el_settings.fadeOnPause) {
95					$video.removeClass('is-visible');
96				}
97			});
98
99
100			// Set default styles
101			$container.css({
102				'position': 'relative',
103				'overflow': 'hidden',
104				'background-size': 'cover',
105				'background-position': 'center center',
106				'background-repeat': 'no-repeat',
107				'background-image': 'url(' + poster + ')'
108			});
109			$video.css({
110				'min-width': 'auto',
111				'min-height': 'auto',
112				'width': '100%',
113				'height': 'auto',
114				'position': 'absolute',
115				'left': '50%',
116				'top': '50%',
117				'transform': 'translate(-50%,-50%)'
118			});
119			if( el_settings.fullScreen ) {
120				$container.css({
121					'position': 'fixed',
122					'top': '0',
123					'bottom': '0',
124					'left': '0',
125					'right': '0',
126					'height': 'auto',
127					'margin': '0',
128					'z-index': '-1'
129				});
130			}
131
132
133			// Fade in video by setting the transition duration
134			$video.css('transition-duration', el_settings.fadeIn + 'ms');
135
136
137			// Remove on iOS
138			if( iOS ) {
139				// Unset sources to prevent them from continuing to download
140				$video.attr('src', '');
141				$video.find('source').attr('src', '');
142				$video.remove();
143			}
144
145
146			// Mimic background-size: cover with video element
147			$.fn.bgVideo.fitVideo( $video );
148			$(window).resize(function(){
149				$.fn.bgVideo.fitVideo( $video );
150			});
151
152
153			// Pause after X seconds
154			el_settings.pauseAfter = parseInt( el_settings.pauseAfter, 10 );
155			if( el_settings.pauseAfter > 0 ) {
156				$video.on('timeupdate', function(){
157					var now = currentTime();
158					if( now > start_time + el_settings.pauseAfter ) {
159						video.pause();
160						if( el_settings.fadeOnEnd ) {
161							$video.removeClass('is-visible');
162						}
163					}
164				});
165			}
166
167
168			// Play / pause button
169			if( el_settings.showPausePlay ) {
170				// Append pauseplay element created earlier
171				$container.append($pauseplay);
172				// Position element
173				$pauseplay.css({
174					'left':   'auto',
175					'right':  'auto',
176					'top':    'auto',
177					'bottom': 'auto'
178				});
179				$pauseplay.css(el_settings.pausePlayXPos, el_settings.pausePlayXOffset);
180				$pauseplay.css(el_settings.pausePlayYPos, el_settings.pausePlayYOffset);
181				if( el_settings.pausePlayXPos === 'center' ) {
182					$pauseplay.css({
183						'left':        '50%',
184						'margin-left': '-10px'
185					});
186				}
187				if( el_settings.pausePlayYPos === 'center' ) {
188					$pauseplay.css({
189						'top':        '50%',
190						'margin-top': '-10px'
191					});
192				}
193				// Add functionality
194				$pauseplay.on('click', function(){
195					if(video.paused) {
196						video.play();
197						start_time = currentTime();
198					} else {
199						video.pause();
200					}
201				});
202			}
203
204
205		});
206
207
208	};
209
210
211	// Default settings
212	$.fn.bgVideo.defaults = {
213		fullScreen: false, // Sets the video to be fixed to the full window
214		fadeIn: 500, // Milliseconds to fade video in/out (0 for no fade)
215		pauseAfter: 120, // Seconds to play before pausing (0 for forever)
216		fadeOnPause: false, // For all (including manual) pauses
217		fadeOnEnd: true, // When we've reached the pauseAfter time
218		showPausePlay: true, // Show pause/play button
219		pausePlayXPos: 'right', // left|right|center
220		pausePlayYPos: 'top', // top|bottom|center
221		pausePlayXOffset: '15px', // pixels or percent from side - ignored if positioned center
222		pausePlayYOffset: '15px' // pixels or percent from top/bottom - ignored if positioned center
223	};
224
225
226	// Fit video
227	$.fn.bgVideo.fitVideo = function( $video ) {
228
229		var $container = $video.parent(),
230			container_height = $container.outerHeight(),
231			container_width = $container.outerWidth();
232
233		// Do this again every time the screen size changes
234		$video.css({
235			'height': 'auto',
236			'width': container_width + 'px'
237		});
238
239		var video_height = $video.height();
240
241		if( container_height > video_height ) {
242			//console.log('Container height > video height');
243			$video.css({
244				'height': container_height + 'px',
245				'width': 'auto'
246			});
247		}
248
249	};
250
251
252	// Auto run based on data attributes
253	$(document).ready(function(){
254		$('[data-bgvideo]').bgVideo();
255	});
256
257
258}(jQuery));