Hey all, I don’t know what this is…
I was making it to run some tests – on whether or not isolating live video of people’s faces in a google + hangout was possible. It turns out, not really – yet. Anyway I made this test to see if there was a way to show only a portion of a video – which there is. But if your talking about layering 2 – 3 videos on top of eachother, then you have issues. The problem is the video itself doesn’t disappear behind the overlaying div. If you try to just round out the borders on the iframe, then the video doesn’t work…
So I came to the conclusion that you cannot layer a person’s face on another person’s face using the hangout API, face tracking and a little border-radius magic on objects or iframes…bummer. But here’s the test anyway:
Click here for a demo…
<!--
Note - I have to create a grid of 4 divs to overlay and allow only center circles
to be show - not pretty but it might work...
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
(function($) {
$(window).load(function() {
var elem = $('#overlay');
var iframe = $('#if');
setInterval(function() {
var randTop = Math.floor(Math.random()*50 + 20);
var randLeft = Math.floor(Math.random()*50 + 20);
var reset = Math.floor(Math.random()*100 + 100);
var randOffset = Math.floor(Math.random()*50 + 50);
elem.css({
top: randTop + 'px',
left: randLeft + 'px'
});
iframe.css({
top: randTop + 'px',
left: randLeft + 'px'
});
setTimeout(function() {
if(reset > 150) {
elem.css({
top: (randTop - reset - randOffset) + 'px',
left: (randLeft - reset - randOffset) + 'px'
});
iframe.css({
top: (randTop - reset) + 'px',
left: (randLeft - reset) + 'px'
});
} else {
elem.css({
top: (randTop - reset + randOffset) + 'px',
left: (randLeft + reset + randOffset) + 'px'
});
iframe.css({
top: (randTop - reset) + 'px',
left: (randLeft + reset) + 'px'
});
}
}, 600);
setTimeout(function() {
elem.css({
top: '0px',
left: '0px'
});
}, 1100);
}, 2000);
// setTimeout(function() {
//
// elem.css({
// top: 20,
// left: 20
// });
//
// }, 2000);
//
// setTimeout(function() {
//
// elem.css({
// top: -150,
// left: 0
// });
//
// }, 4000);
//
// setTimeout(function() {
//
// elem.css({
// top: 80,
// left: -50
// });
//
// }, 6000);
//
// setTimeout(function() {
//
// elem.css({
// top: 80,
// left: 150
// });
//
// }, 8000);
//
// setTimeout(function() {
//
// elem.css({
// top: 0,
// left: -150
// });
//
// }, 10000);
});
})(jQuery);
</script>
<style>
section {
display: block;
margin: 0 auto;
width: 420px;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
z-index: 10;
transition: top .5s ease-in-out,left .5s ease-in-out;
-moz-transition:top .5s ease-in-out,left .5s ease-in-out;
-webkit-transition:top .5s ease-in-out,left .5s ease-in-out;
-o-transition:top .5s ease-in-out,left .5s ease-in-out;
}
#container {
width: 420px;
height: 315px;
position: absolute;
top: 0;
left: 0;
background: green;
border-radius: 210px;
border: 50px solid red;
z-index: 20;
}
#overlay {
width: 234px;
height: 221px;
position: absolute;
top: -46px;
left: 0;
/* background: blue;*/
border-radius: 252px;
border: 136px solid white;
z-index: 30;
transition: top .5s ease-in-out,left .5s ease-in-out;
-moz-transition:top .5s ease-in-out,left .5s ease-in-out;
-webkit-transition:top .5s ease-in-out,left .5s ease-in-out;
-o-transition:top .5s ease-in-out,left .5s ease-in-out;
}
</style>
</head>
<body>
<div id="wrap">
<header>
</header>
<section>
<div id="container">
<iframe id="if" width="420" height="315" src="https://www.youtube.com/embed/vptfm9D6owo?rel=0&autoplay=1&wmode=Transparent" frameborder="0" allowfullscreen></iframe>
</div>
<div id="overlay"></div>
</section>
<footer>
</footer>
</div>
</body>
</html>
It works by taking using css transitions for the animation – then every 2 seconds, javascript passes some location changes to the video and the overlaying div. These location changes automatically animate with css3 transitions and are randomly placed. At the end of every 2 second loop, there’s a reset so the overlay and video return to:
top: 0px; left: 0px;
Let me know if you’re interested in a real explanation and I’ll write one up…