2
0

Add fallback in case the video doesn't work.

This commit is contained in:
Maarten Billemont 2014-10-06 23:30:41 -04:00
parent 480e7f192a
commit 979d3a2a5a
5 changed files with 40 additions and 7 deletions

View File

@ -331,18 +331,32 @@ header h2 {
} }
header .movie { header .movie {
display: none; display: none;
background: black; background: url('../img/about.png') no-repeat scroll 50% 40px/cover black;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 40px; padding-top: 40px;
} }
header .movie::after {
display: block;
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../img/loading-spin.svg') no-repeat scroll center center transparent;
}
header.play { header.play {
height: 94% !important; height: 94% !important;
} }
header.play .movie { header.play .movie {
display: block; display: block;
} }
header.play .movie video {
position: relative;
z-index: 3;
}
header.play h1, header.play h2, header.play .box { header.play h1, header.play h2, header.play .box {
display: none; display: none;
} }
@ -373,10 +387,11 @@ header.play .moviecontrol {
header.play .moviecontrol::before { header.play .moviecontrol::before {
content: "❙❙"; content: "❙❙";
} }
header .movie:before { header .movie::before {
display: block; display: block;
content: " "; content: " ";
position: absolute; position: absolute;
z-index: 4;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -390,6 +405,15 @@ header .movie video {
height: calc(100% - 40px); height: calc(100% - 40px);
height: auto; height: auto;
} }
header .movie .fallback {
position: absolute;
left: 0;
right: 0;
bottom: 60px;
text-align: center;
z-index: 5;
color: #BBB;
}
footer { footer {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;

View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title itemprop="name">Master Password &mdash; Secure your life, forget your passwords.</title> <title itemprop="name">Master Password &mdash; Secure your life, forget your passwords.</title>
<meta itemprop="description" content="Master Password is an ingenious password solution that makes your passwords truly impossible to lose." /> <meta itemprop="description" content="Master Password is an ingenious password solution that makes your passwords truly impossible to lose." />
<meta itemprop="image" content="http://masterpassword.lyndir.com/img/iTunesArtwork-Rounded.png" /> <meta itemprop="image" content="http://masterpassword.lyndir.com/img/about.png" />
<meta name="apple-itunes-app" content="app-id=510296984" /> <meta name="apple-itunes-app" content="app-id=510296984" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -63,6 +63,7 @@
<source src="vid/about.mp4" type="video/mp4"> <source src="vid/about.mp4" type="video/mp4">
<source src="vid/about.ogv" type="video/ogg; codecs=theora,vorbis"> <source src="vid/about.ogv" type="video/ogg; codecs=theora,vorbis">
</video> </video>
<h5 class="fallback"><a href="https://vimeo.com/108192090">I've been waiting for <em>hours</em> and it's still loading...</a></h5>
</div> </div>
<a href="javascript:toggleMovie()" class="moviecontrol" onclick="$(this).toggleClass('active');_gaq.push(['_trackPageview', '/video/about']);"></a> <a href="javascript:toggleMovie()" class="moviecontrol" onclick="$(this).toggleClass('active');_gaq.push(['_trackPageview', '/video/about']);"></a>

View File

@ -4,6 +4,13 @@ $(function(){
window.onscroll = function() { window.onscroll = function() {
document.getElementById("scrollDown").style.opacity = Math.max(0, 200 - window.scrollY) / 200; document.getElementById("scrollDown").style.opacity = Math.max(0, 200 - window.scrollY) / 200;
}; };
if (document.location.hash == "#video")
toggleMovie();
$("video")[0].addEventListener("playing", function() {
$(this).parents().find(".fallback").hide();
}, true);
}); });
function toggleMovie() { function toggleMovie() {

View File

@ -1 +0,0 @@
/Users/lhunath/Movies/About Master Password.mov

View File

@ -158,9 +158,11 @@
<p>A very valid question, and arguably the most important one to ask!</p> <p>A very valid question, and arguably the most important one to ask!</p>
<p>Trust is a very difficult thing to guarantee. Powerful entities will sollicit your trust by appearing with it and coming well recommended. Trust can also be assured by legalese or contracts. If you have the means and energy to hold an entity responsible for his claims and actions, this might be sufficient for you.</p> <p>Trust is a very difficult thing to guarantee. Powerful entities will sollicit your trust by appearing with it and coming well recommended. Trust can also be assured by legalese or contracts. If you have the means and energy to hold an entity responsible for his claims and actions, this might be sufficient for you.</p>
<p>Most of us mere mortals cannot affort this level of trust enforcement, however. We're mostly left in the position of trusting claims blindly, in the hopes that companies will not violate those claims for fear of taking a seizable public-relations hit.</p> <p>Most of us mere mortals cannot affort this level of trust enforcement, however. We're mostly left in the position of trusting claims blindly, in the hopes that companies will not violate those claims for fear of taking a seizable public-relations hit.</p>
<p>I propose that none of these forms of trust are sufficient adequate.<br /> <h3>I propose that none of these forms of trust are sufficient adequate.</h3>
In fact, Master Password is what it is because it aims to avoid any requirement of trust in the solution's author. Master Password requires no services or proprietary storage format. I've published Master Password's algorithm for you to inspect and licensed to you the full source code to the implementations for you to use.</p> <p>In fact, Master Password is what it is because it aims to avoid any requirement of trust in the solution's author. Master Password requires no services or proprietary storage format. I've published Master Password's algorithm for you to inspect and licensed to you the full source code to the implementations for you to use.</p>
<p>What that gives you, is the ability to either inspect and learn how Master Password works or to take this information to a professional (be it an academic, mathematician or payed developer) and have him do this for you. <p>What that gives you, is the ability to either inspect and learn how Master Password works or to take this information to a professional (be it an academic, mathematician or payed developer) and have him do this for you.</p>
<p>While at first glimpse, this may not seem terribly useful to you - particularly when you don't have the skillset to perform this verification yourself - but it's actually a pretty big deal to show your naked self as proof of having nothing to hide. If you want to go all the way, you could even build the application from scratch rather than rely on the binaries provided by our distributions.</p>
<p>This is the closest we can get to voiding any need for trust in Master Password, and it's more than you're likely to find in most other popular password solutions.</p>
</div> </div>