Created
December 19, 2011 01:46
-
-
Save dmolsen/1495085 to your computer and use it in GitHub Desktop.
Holiday card timed events code
This file contains 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
// don't change these variables | |
var p = false; // currently playing | |
var e = false; // ended | |
var j = true; // first play | |
var videoTimeRaw = 0; | |
var currentTime = 0; | |
var defaultInterval = 100; | |
// configure these variables | |
var vidId = 'videoEmbed'; // the ID of the div holding the video | |
var vidYTId = 'N-zXaiDNKjU'; // the ID of the video from YouTube | |
var vidParams = { rel: 0, showsearch: 0, showinfo: 0, modestbranding: 1, autohide: 1, fs: 1 }; // video params | |
var vidLength = 141000; // so we can make sure some checks don't go on forever | |
domReady(function () { | |
// check to see if the browser supports flash (for iOS) | |
if (swfobject.hasFlashPlayerVersion("1")) { | |
// every 100ms do the following: | |
// - see if a video is playing. if it is: | |
// -- increment the currentTime tracker 100 | |
// -- fires an event that matches that currentTime | |
timeCheck = setInterval(function() { | |
if (p != false) { | |
currentTime += defaultInterval; | |
YTVideo.fireEvent(currentTime.toString()); | |
} | |
}, defaultInterval); | |
// set-up the video | |
var YTVideo = new YoutubePlayer(vidId, vidYTId, { | |
width: 800, | |
height: 450, | |
objparams: { allowFullScreen: "true", wmode: "window" }, | |
ytparams: vidParams | |
}); | |
// show select overlays at particular times | |
// toggleClass(element, class to remove, class to add) | |
var overlaysShow = new Array(); | |
overlaysShow["26000"] = "towers"; | |
overlaysShow["28500"] = "reccenter"; | |
overlaysShow["32000"] = "coliseum"; | |
overlaysShow["36000"] = "alumni"; | |
overlaysShow["49000"] = "hsc"; | |
overlaysShow["54000"] = "fireworks"; | |
for (time in overlaysShow) { | |
YTVideo.at(time, function(_overlay) { | |
return function() { | |
toggleClass(document.getElementById(_overlay), 'overlayHide', 'overlayShow'); | |
} | |
}(overlaysShow[time])); | |
} | |
// hide select overlays at particular times | |
var overlaysHide = new Array(); | |
overlaysHide["66000"] = "fireworks"; | |
for (time in overlaysHide) { | |
YTVideo.at(time, function(_overlay) { | |
return function() { | |
toggleClass(document.getElementById(_overlay), 'overlayShow', 'overlayHide'); | |
} | |
}(overlaysHide[time])); | |
} | |
// downtown sprite animation info | |
YTVideo.at("84500", function() { | |
toggleClass(document.getElementById("downtownSprite"), 'foo', 'moveDowntownSprite'); | |
}); | |
YTVideo.at("86600", function() { | |
toggleClass(document.getElementById("downtownSprite"), 'moveDowntownSprite', ''); | |
}); | |
// prt sprite animation info | |
YTVideo.at("19000", function() { | |
toggleClass(document.getElementById("prtSprite"), 'foo', 'movePRTSprite'); | |
}); | |
YTVideo.at("20100", function() { | |
toggleClass(document.getElementById("prtSprite"), 'movePRTSprite', ''); | |
}); | |
// listen for the standard events and note that the video ISN'T playing | |
YTVideo.on('unstarted,paused,buffering,cued', function() { | |
p = false; | |
}); | |
YTVideo.on('ended', function() { | |
p = false; | |
e = true; | |
// show the thank you message | |
// call the functions | |
toggleClass(document.getElementById('main'), 'videoHide', 'videoShow'); | |
toggleClass(document.getElementById('likeables'), 'videoHide', 'videoShow'); | |
//toggleClass(document.getElementById('bgControls'), 'videoHide', 'videoShow'); | |
//toggleClass(document.getElementById('snowControls'), 'videoHide', 'videoShow'); | |
toggleClass(document.getElementById('footer_default'), 'videoHide', 'videoShow'); | |
}); | |
// listen for when the video is played. update the currentTime incrementor based on | |
// where the user is in the video. note that the video IS playing. | |
YTVideo.on('playing', function() { | |
videoTimeRaw = document.getElementById(vidId).getCurrentTime(); | |
currentTime = Math.round(videoTimeRaw*10)*100; | |
p = true; | |
/* if you have anything else that should happen when a user hits play stick it here */ | |
// hide the intro & outro text | |
toggleClass(document.getElementById('main'), 'videoShow', 'videoHide'); | |
toggleClass(document.getElementById('likeables'), 'videoShow', 'videoHide'); | |
//toggleClass(document.getElementById('bgControls'), 'videoShow', 'videoHide'); | |
//toggleClass(document.getElementById('snowControls'), 'videoShow', 'videoHide'); | |
toggleClass(document.getElementById('footer_default'), 'videoShow', 'videoHide'); | |
if (!e && !j) { | |
// figure out which animations we should make sure are off on a scrub backwards in time | |
var f = false; | |
var currentTimeCheck = currentTime; | |
while (!f) { | |
if (overlaysShow[currentTimeCheck.toString()]) { | |
var overlaysTurnOff = overlaysShow.slice(currentTimeCheck); | |
f = true; | |
} | |
currentTimeCheck += defaultInterval; | |
if (currentTimeCheck > vidLength) { | |
f = true; | |
} | |
} | |
for (time in overlaysTurnOff) { | |
toggleClass(document.getElementById(overlaysTurnOff[time]), 'overlayShow', 'overlayHide'); | |
} | |
} else if (e) { | |
e = false; | |
// turn off all the elements because the video had ended and it's being replayed | |
for (time in overlaysShow) { | |
toggleClass(document.getElementById(overlaysShow[time]), 'overlayShow', 'overlayHide'); | |
} | |
} | |
j = false; // note the first play has happened | |
}); | |
} else { | |
var ytURLParams = ''; | |
for (val in vidParams) { | |
ytURLParams += '&'+val+'='+vidParams[val]; | |
} | |
document.getElementById(vidId).innerHTML = '<iframe width="100%" height="100%" src="http://www.youtube.com/embed/'+vidYTId+'?'+ytURLParams+'" frameborder="0" allowfullscreen></iframe>'; | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment