Created
January 22, 2016 03:49
-
-
Save joshrieken/a4e44f8830eef4299bd6 to your computer and use it in GitHub Desktop.
Ardent Camper looping videos code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
var $video = $('.hero-video'); | |
var $hero = $('.hero'); | |
if (!!$video.length) { | |
function playVideos() { | |
var videos = [ | |
{ | |
src: [ | |
'http://ardent-camper-production.s3.amazonaws.com/rootglacier.webm', | |
'http://ardent-camper-production.s3.amazonaws.com/rootglacier.mp4' | |
], | |
title: 'Root Glacier' | |
}, | |
{ | |
src: [ | |
'http://ardent-camper-production.s3.amazonaws.com/flagstaff.webm', | |
'http://ardent-camper-production.s3.amazonaws.com/flagstaff.mp4', | |
], | |
title: 'Flagstaff', | |
}, | |
{ | |
src: [ | |
'http://ardent-camper-production.s3.amazonaws.com/sedona.webm', | |
'http://ardent-camper-production.s3.amazonaws.com/sedona.mp4', | |
], | |
title: 'Sedona', | |
}, | |
{ | |
src: [ | |
'http://ardent-camper-production.s3.amazonaws.com/sedona2.webm', | |
'http://ardent-camper-production.s3.amazonaws.com/sedona2.mp4', | |
], | |
title: 'Sedona 2', | |
}, | |
]; | |
var player = videojs($video[0]); | |
var fadedIn = false; | |
var fadedOut = false; | |
player.on('timeupdate', function() { | |
if (player.currentTime() > 0.75 && player.remainingTime() >= 1.75) { | |
if (!fadedIn) { | |
$('.video-container').fadeTo(1000, 1); | |
fadedIn = true; | |
fadedOut = false; | |
} | |
} | |
if (player.remainingTime() < 1.75 && player.currentTime() >= 0.75) { | |
if (!fadedOut) { | |
$('.video-container').fadeTo(1000, 0); | |
fadedIn = false; | |
fadedOut = true; | |
} | |
} | |
}); | |
player.ready(function() { | |
this.on('lastVideoEnded', function() { | |
player.playList(0); | |
}); | |
player.play(); | |
}); | |
player.playList(videos); | |
} | |
playVideos(); | |
} | |
}); | |
function setHeaderHeightToVideoHeight() { | |
var $video = $('video'); | |
if ($video.is(':visible')) { | |
var videoHeight = $video.height(); | |
var newHeight = videoHeight > 506 ? videoHeight : 506; | |
$('.content-head').css('min-height', newHeight); | |
} | |
} | |
$(window).resize(setHeaderHeightToVideoHeight); | |
$(document).ready(function() { | |
// Give time for video to load and start playing, then set the height. | |
setTimeout(setHeaderHeightToVideoHeight, 6000); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment