Skip to content

Instantly share code, notes, and snippets.

@cmwelsh

cmwelsh/splash.css

Created September 21, 2011 20:10
Show Gist options
  • Save cmwelsh/1233145 to your computer and use it in GitHub Desktop.
Save cmwelsh/1233145 to your computer and use it in GitHub Desktop.
Download ZIP
Video Container script for jQuery
Raw
splash.css
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #000000;
}
.skip-video-button {
display: block;
width: 187px;
height: 53px;
overflow: hidden;
background: url(../layout/splash/splash-skip-button.png) no-repeat;
position: fixed;
left: 50%;
margin-left: -95px;
bottom: 20px;
z-index: 9000;
text-indent: -9999px;
}
Raw
splash.js
// Flash events
var splashPage;
(function ($) {
"use strict";
var player;
function initFlashEvents() {
// JWPlayer will add methods to this DOM element
player = $('object').get(0);
// Wait - the player isn't fully initialized yet
setTimeout(function () {
// Hopefully it's initialized, but let's make sure...
if (typeof player.addModelListener !== 'undefined') {
// Listen for state changes
// The second parameter is a string naming the
// callback function
player.addModelListener("STATE", "splashPage.flashStateListener");
}
}, 200);
}
function flashStateListener(obj) {
// Possible states:
// IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
var currentState, previousState;
currentState = obj.newstate;
previousState = obj.oldstate;
if (currentState == 'COMPLETED' || previousState == 'COMPLETED') {
// Forward to destination
document.location = $('.skip-video-button').attr('href');
}
/*
if (currentState == 'PAUSED') {
// Pause denied, resume playback
player.sendEvent('PLAY', 'true');
}
*/
}
player = null;
splashPage = {
initFlashEvents: initFlashEvents,
flashStateListener: flashStateListener
};
})(jQuery);
// JWPlayer ready callback
function playerReady() {
splashPage.initFlashEvents();
}
jQuery(function ($) {
"use strict";
var $videoPlayer;
function resizeVideo() {
var windowSize;
function getWindowSize() {
return {
width: $(window).width(),
height: $(window).height()
};
}
function setElemSize($elem) {
if ($videoPlayer.hasClass('player-type-html')) {
$elem.width(windowSize.width);
// leave room at bottom of page for buttons
$elem.height(windowSize.height - 80);
}
else {
$elem.width(windowSize.width);
$elem.height(windowSize.height);
}
}
windowSize = getWindowSize();
// It gets the job done...
setElemSize($videoPlayer);
setElemSize($videoPlayer.children(':first'));
setElemSize($videoPlayer.children(':first').children(':first'));
setElemSize($videoPlayer.find('.vjs-poster'));
}
$.fn.videoContainer.defaults = {
jwPlayer: 'http://cdn.row27.com/clients/olemiss/forwardtogether/flash/player.swf',
autoplay: true,
controls: false,
flashvars: {
stretching: 'fill',
}
};
// only disable controls on desktop browsers...
if (navigator.userAgent.match(/like Mac OS X/i) || navigator.userAgent.toLowerCase().indexOf("android") > -1) {
$.fn.videoContainer.defaults['controls'] = true;
}
$videoPlayer = $('.splash-video');
// set size
resizeVideo();
// load player
$videoPlayer.videoContainer();
// set size
resizeVideo();
// bind set size callback
$(window).resize(resizeVideo);
// bind HTML video player callbacks
if ($videoPlayer.hasClass('player-type-html')) {
$videoPlayer.find('video').bind('ended', function () {
document.location = $('.skip-video-button').attr('href');
})/*.bind('pause', function () {
// Pause denied, resume playback
this.play();
})*/;
}
});
Raw
video.min.css
/*
VideoJS Default Styles (http://videojs.com)
Version 2.0.2
*/
.video-js-box{text-align:left;position:relative;line-height:0!important;margin:0;padding:0!important;border:none!important}video.video-js{background-color:#000;position:relative;padding:0}.vjs-flash-fallback{display:block}.video-js-box img.vjs-poster{display:block;position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer}.video-js-box .vjs-subtitles{color:#fff;font-size:20px;text-align:center;position:absolute;bottom:40px;left:0;right:0}.video-js-box.vjs-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}.video-js-box.vjs-fullscreen video.video-js,.video-js-box.vjs-fullscreen .vjs-flash-fallback{position:relative;top:0;left:0;width:100%;height:100%;z-index:1000}.video-js-box.vjs-fullscreen img.vjs-poster{z-index:1001}.video-js-box.vjs-fullscreen .vjs-spinner{z-index:1001}.video-js-box.vjs-fullscreen .vjs-controls{z-index:1003}.video-js-box.vjs-fullscreen .vjs-big-play-button{z-index:1004}.video-js-box.vjs-fullscreen .vjs-subtitles{z-index:1004}.vjs-styles-check{height:5px;position:absolute}.video-js-box.vjs-controls-below .vjs-controls{position:relative;opacity:1;background-color:#000}.video-js-box.vjs-controls-below .vjs-subtitles{bottom:75px}.video-js-box .vjs-controls{position:absolute;margin:0;opacity:.85;color:#fff;display:none;left:0;right:0;width:100%;bottom:0;height:35px;padding:0}.video-js-box .vjs-controls>div{position:absolute;text-align:center;margin:0;padding:0;height:25px;top:5px;background-color:#0b151a;background:#1f3744 -webkit-gradient(linear,left top,left bottom,from(#0b151a),to(#1f3744)) left 12px;background:#1f3744 -moz-linear-gradient(top,#0b151a,#1f3744) left 12px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;box-shadow:1px 1px 2px #000;-webkit-box-shadow:1px 1px 2px #000;-moz-box-shadow:1px 1px 2px #000}.vjs-controls>div.vjs-play-control{left:5px;width:25px}.vjs-controls>div.vjs-progress-control{left:35px;right:165px}.vjs-controls>div.vjs-time-control{width:75px;right:90px}.vjs-controls>div.vjs-volume-control{width:50px;right:35px}.vjs-controls>div.vjs-fullscreen-control{width:25px;right:5px}.vjs-controls>div.vjs-progress-control{border-top-right-radius:0;-webkit-border-top-right-radius:0;-moz-border-radius-topright:0;border-bottom-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius-bottomright:0}.vjs-controls>div.vjs-time-control{border-top-left-radius:0;-webkit-border-top-left-radius:0;-moz-border-radius-topleft:0;border-bottom-left-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-bottomleft:0}.vjs-play-control{cursor:pointer!important}.vjs-play-control span{display:block;font-size:0;line-height:0}.vjs-paused .vjs-play-control span{width:0;height:0;margin:8px 0 0 8px;border-left:10px solid #fff;border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0)}.vjs-playing .vjs-play-control span{width:3px;height:10px;margin:8px auto 0;border-top:0;border-left:3px solid #fff;border-bottom:0;border-right:3px solid #fff}.vjs-progress-holder{position:relative;padding:0;overflow:hidden;cursor:pointer!important;height:9px;border:1px solid #777;margin:7px 1px 0 5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px}.vjs-progress-holder div{position:absolute;display:block;width:0;height:9px;margin:0;padding:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px}.vjs-play-progress{background:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#777));background:-moz-linear-gradient(top,#fff,#777)}.vjs-load-progress{opacity:.8;background-color:#555;background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#aaa));background:-moz-linear-gradient(top,#555,#aaa)}.vjs-controls .vjs-time-control{font-size:10px;line-height:1;font-weight:normal;font-family:Helvetica,Arial,sans-serif}.vjs-controls .vjs-time-control span{line-height:25px}.vjs-volume-control{cursor:pointer!important}.vjs-volume-control div{display:block;margin:0 5px 0 5px;padding:4px 0 0 0}.vjs-volume-control div span{float:left;padding:0;margin:0 2px 0 0;width:5px;height:0;border-bottom:18px solid #555}.vjs-volume-control div span.vjs-volume-level-on{border-color:#fff}.vjs-volume-control div span:nth-child(1){border-bottom-width:2px;height:16px}.vjs-volume-control div span:nth-child(2){border-bottom-width:4px;height:14px}.vjs-volume-control div span:nth-child(3){border-bottom-width:7px;height:11px}.vjs-volume-control div span:nth-child(4){border-bottom-width:10px;height:8px}.vjs-volume-control div span:nth-child(5){border-bottom-width:14px;height:4px}.vjs-volume-control div span:nth-child(6){margin-right:0}.vjs-fullscreen-control{cursor:pointer!important}.vjs-fullscreen-control div{padding:0;text-align:left;vertical-align:top;cursor:pointer!important;margin:5px 0 0 5px;width:20px;height:20px}.vjs-fullscreen-control div span{float:left;margin:0;padding:0;font-size:0;line-height:0;width:0;text-align:left;vertical-align:top}.vjs-fullscreen-control div span:nth-child(1){margin-right:3px;margin-bottom:3px;border-top:6px solid #fff;border-right:6px solid rgba(0,0,0,0)}
.vjs-fullscreen-control div span:nth-child(2){border-top:6px solid #fff;border-left:6px solid rgba(0,0,0,0)}.vjs-fullscreen-control div span:nth-child(3){clear:both;margin:0 3px 0 0;border-bottom:6px solid #fff;border-right:6px solid rgba(0,0,0,0)}.vjs-fullscreen-control div span:nth-child(4){border-bottom:6px solid #fff;border-left:6px solid rgba(0,0,0,0)}.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1){border:0;border-bottom:6px solid #fff;border-left:6px solid rgba(0,0,0,0)}.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2){border:0;border-bottom:6px solid #fff;border-right:6px solid rgba(0,0,0,0)}.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3){border:0;border-top:6px solid #fff;border-left:6px solid rgba(0,0,0,0)}.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4){border:0;border-top:6px solid #fff;border-right:6px solid rgba(0,0,0,0)}.vjs-no-video{font-size:small;line-height:1.5}div.vjs-big-play-button{display:none;z-index:2;position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-43px 0 0 -43px;text-align:center;vertical-align:center;cursor:pointer!important;border:3px solid #fff;opacity:.9;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;background-color:#0b151a;background:#1f3744 -webkit-gradient(linear,left top,left bottom,from(#0b151a),to(#1f3744)) left 40px;background:#1f3744 -moz-linear-gradient(top,#0b151a,#1f3744) left 40px;box-shadow:4px 4px 8px #000;-webkit-box-shadow:4px 4px 8px #000;-moz-box-shadow:4px 4px 8px #000}div.vjs-big-play-button:hover{box-shadow:0 0 80px #fff;-webkit-box-shadow:0 0 80px #fff;-moz-box-shadow:0 0 80px #fff}div.vjs-big-play-button span{display:block;font-size:0;line-height:0;width:0;height:0;margin:20px 0 0 23px;border-left:40px solid #fff;border-top:20px solid rgba(0,0,0,0);border-bottom:20px solid rgba(0,0,0,0)}.vjs-spinner{display:none;position:absolute;top:50%;left:50%;width:100px;height:100px;z-index:1;margin:-50px 0 0 -50px;transform:scale(0.5);-webkit-transform:scale(0.5);-moz-transform:scale(0.5)}.vjs-spinner div{position:absolute;left:40px;top:40px;width:20px;height:20px;background:#fff;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;border:1px solid #ccc}.vjs-spinner div:nth-child(1){opacity:.12;transform:rotate(000deg) translate(0,-40px) scale(0.1);-webkit-transform:rotate(000deg) translate(0,-40px) scale(0.1);-moz-transform:rotate(000deg) translate(0,-40px) scale(0.1)}.vjs-spinner div:nth-child(2){opacity:.25;transform:rotate(045deg) translate(0,-40px) scale(0.2);-webkit-transform:rotate(045deg) translate(0,-40px) scale(0.2);-moz-transform:rotate(045deg) translate(0,-40px) scale(0.2)}.vjs-spinner div:nth-child(3){opacity:.37;transform:rotate(090deg) translate(0,-40px) scale(0.4);-webkit-transform:rotate(090deg) translate(0,-40px) scale(0.4);-moz-transform:rotate(090deg) translate(0,-40px) scale(0.4)}.vjs-spinner div:nth-child(4){opacity:.50;transform:rotate(135deg) translate(0,-40px) scale(0.6);-webkit-transform:rotate(135deg) translate(0,-40px) scale(0.6);-moz-transform:rotate(135deg) translate(0,-40px) scale(0.6)}.vjs-spinner div:nth-child(5){opacity:.62;transform:rotate(180deg) translate(0,-40px) scale(0.8);-webkit-transform:rotate(180deg) translate(0,-40px) scale(0.8);-moz-transform:rotate(180deg) translate(0,-40px) scale(0.8)}.vjs-spinner div:nth-child(6){opacity:.75;transform:rotate(225deg) translate(0,-40px) scale(1.0);-webkit-transform:rotate(225deg) translate(0,-40px) scale(1.0);-moz-transform:rotate(225deg) translate(0,-40px) scale(1.0)}.vjs-spinner div:nth-child(7){opacity:.87;transform:rotate(270deg) translate(0,-40px) scale(1.1);-webkit-transform:rotate(270deg) translate(0,-40px) scale(1.1);-moz-transform:rotate(270deg) translate(0,-40px) scale(1.1)}.vjs-spinner div:nth-child(8){opacity:1.00;transform:rotate(315deg) translate(0,-40px) scale(1.3);-webkit-transform:rotate(315deg) translate(0,-40px) scale(1.3);-moz-transform:rotate(315deg) translate(0,-40px) scale(1.3)}
/*
VideoJS HuCSS Skin (http://videojs.com)
Version 2.0.0
*/
.hu-css .vjs-controls{height:47px;opacity:.95;color:#fff;background:#3a3835}.hu-css.video-js-box.vjs-controls-below .vjs-controls{background:#3a3835}.hu-css .vjs-controls>div{top:0;background:0;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}.hu-css .vjs-controls>div.vjs-play-control,.hu-css .vjs-controls>div.vjs-volume-control,.hu-css .vjs-controls>div.vjs-fullscreen-control{bottom:20px;height:27px}.hu-css .vjs-controls>div.vjs-progress-control,.hu-css .vjs-controls>div.vjs-time-control{margin-top:28px;height:19px}.hu-css .vjs-controls>div.vjs-play-control{width:33px;left:0}.hu-css .vjs-controls>div.vjs-progress-control{width:left:84px;right:0}.hu-css .vjs-controls>div.vjs-time-control{width:84px;left:0}.hu-css .vjs-controls>div.vjs-volume-control{width:43px;right:44px}.hu-css .vjs-controls>div.vjs-fullscreen-control{width:43px;right:0}.hu-css.vjs-paused .vjs-play-control span{margin:9px 0 0 12px}.hu-css.vjs-playing .vjs-play-control span{margin:9px 0 0 12px}.hu-css .vjs-play-control:hover{background-color:#000}.hu-css .vjs-progress-holder{height:19px;border:0;margin:0;background:#000;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}.hu-css .vjs-progress-holder div{height:13px;margin-top:3px;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0}.hu-css .vjs-play-progress{background:#777;background:-webkit-gradient(linear,left top,left bottom,from(#999),to(#777));background:-moz-linear-gradient(top,#999,#777)}.hu-css .vjs-load-progress{background:#555}.hu-css .vjs-controls .vjs-time-control{font-size:11px;background:#000}.hu-css .vjs-controls .vjs-time-control span{line-height:19px}.hu-css .vjs-volume-control div{margin:0 5px 0 5px;padding:9px 0 0 0}.hu-css .vjs-volume-control div span{margin:0 2px 0 0;width:3px;height:0;border-bottom:12px solid #555}.hu-css .vjs-volume-control div span.vjs-volume-level-on{border-color:#fff}.hu-css .vjs-volume-control div span:nth-child(1){border-bottom-width:2px;height:10px}.hu-css .vjs-volume-control div span:nth-child(2){border-bottom-width:4px;height:8px}.hu-css .vjs-volume-control div span:nth-child(3){border-bottom-width:6px;height:6px}.hu-css .vjs-volume-control div span:nth-child(4){border-bottom-width:8px;height:4px}.hu-css .vjs-volume-control div span:nth-child(5){border-bottom-width:10px;height:2px}.hu-css .vjs-fullscreen-control:hover{background-color:#000}.hu-css .vjs-fullscreen-control div{margin:8px 0 0 0;padding-left:13px;height:13px;border-left:1px solid #555}.hu-css .vjs-fullscreen-control div span:nth-child(1){margin-right:9px;margin-bottom:5px;border-top:4px solid #fff;border-right:4px solid rgba(0,0,0,0)}.hu-css .vjs-fullscreen-control div span:nth-child(2){border-top:4px solid #fff;border-left:4px solid rgba(0,0,0,0)}.hu-css .vjs-fullscreen-control div span:nth-child(3){clear:both;margin:0 9px 0 0;border-bottom:4px solid #fff;border-right:4px solid rgba(0,0,0,0)}.hu-css .vjs-fullscreen-control div span:nth-child(4){border-bottom:4px solid #fff;border-left:4px solid rgba(0,0,0,0)}.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1){border:0;border-bottom:4px solid #fff;border-left:4px solid rgba(0,0,0,0)}.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2){border:0;border-bottom:4px solid #fff;border-right:4px solid rgba(0,0,0,0)}.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3){border:0;border-top:4px solid #fff;border-left:4px solid rgba(0,0,0,0)}.hu-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4){border:0;border-top:4px solid #fff;border-right:4px solid rgba(0,0,0,0)}.hu-css div.vjs-big-play-button{width:76px;height:70px;margin:-35px 0 0 -38px;border:1px solid #ccc;opacity:.8;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;background:rgba(50,50,50,0.8);box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}.hu-css div.vjs-big-play-button:hover{box-shadow:0 0 80px #fff;-webkit-box-shadow:0 0 80px #fff;-moz-box-shadow:0 0 80px #fff}.hu-css div.vjs-big-play-button span{margin:16px 0 0 21px;border-left:40px solid #fff;border-top:20px solid rgba(0,0,0,0);border-bottom:20px solid rgba(0,0,0,0)}
Raw
videocontainer.js
(function ($) {
"use strict";
var defaults;
function videoContainer(opts) {
var $this, h264Url, posterUrl,
width, height, options;
function loadFlashVideo() {
var flashvars, params, siteurl, skinUrl,
attributes, flashObjectUrl, playerId;
function generateRandomId() {
return 'video-' + Math.floor(Math.random() * 1000000000);
}
// Add identifying class to the container
$this.addClass('player-type-flash');
playerId = generateRandomId();
$this.html('<div id="' + playerId + '"></div>');
siteurl = $('body').data('siteurl');
flashObjectUrl = options.jwPlayer;
skinUrl = options.jwSkin;
flashvars = $.extend({}, options.flashvars, {
file: h264Url
});
if (posterUrl) {
flashvars['image'] = posterUrl;
}
if (options.jwSkin) {
flashvars['skin'] = skinUrl;
}
if (options.controls) {
flashvars['controlbar.position'] = 'over';
flashvars['controlbar.idlehide'] = 'true';
}
else {
flashvars['controlbar.position'] = 'none';
}
if (options.autoplay) {
flashvars['autostart'] = 'true';
}
params = {
allowfullscreen: 'true',
allowscriptaccess: 'always',
wmode: 'transparent'
};
attributes = {
'id': playerId
};
swfobject.embedSWF(
flashObjectUrl,
playerId,
width,
height,
'9',
'false',
flashvars,
params,
attributes
);
}
function loadHtml5Video() {
var $video;
function getVideoTemplate() {
var autoplay,
controls,
vjsSkinClass,
posterAttribute,
posterFallback;
autoplay = '';
if (options.autoplay) {
autoplay = ' autoplay ';
}
controls = '';
if (options.controls) {
controls = ' controls ';
}
vjsSkinClass = '';
if (options.vjsSkin) {
vjsSkinClass = options.vjsSkin + '-css';
}
posterAttribute = '';
posterFallback = '';
if (posterUrl) {
posterAttribute = ' poster="' + posterUrl + '" ';
posterFallback = '<img src="' + posterUrl +
'" alt="Poster Image" title="No video playback capabilities.">';
}
// Using Video for Everybody: http://videojs.com
return '<div class="video-js-box ' + vjsSkinClass + '">' +
'<video class="video-js" width="' + width +
'" height="' + height + '" ' + autoplay + controls +
posterAttribute + '>' + '<source src="' + h264Url +
'" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />' +
posterFallback + '</video>' + '</div>';
}
// Add identifying class to the container
$this.addClass('player-type-html');
$this.html(getVideoTemplate());
$video = $this.find('video');
$video.VideoJS();
// Delete the controls if they're disabled
if (!options.controls) {
$this.find('.vjs-controls').remove();
}
}
options = $.extend({}, defaults, $.fn.videoContainer.defaults, opts);
$this = $(this);
$this.empty();
width = $this.width();
height = $this.height();
h264Url = $this.data('h264');
posterUrl = $this.data('poster');
if (swfobject.hasFlashPlayerVersion("9")) {
loadFlashVideo();
}
else {
loadHtml5Video();
}
}
$.fn.videoContainer = function (opts) {
this.each(function () {
videoContainer.call(this, opts);
});
};
$.fn.videoContainer.defaults = {};
defaults = {
jwPlayer: '',
jwSkin: '',
vjsSkin: '',
autoplay: false,
controls: true,
flashvars: {}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment