Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Holiday card timed events code
// 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