<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title>Cube</title>
<meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js" type="text/javascript"></script>
<script src="modernizr.js" type="text/javascript"></script>
<script src="cube.js" type="text/javascript"></script>
<link href="//vjs.zencdn.net/4.1/video-js.css">
<script src="//vjs.zencdn.net/4.1/video.js" type="text/javascript"></script>
<script type="text/javascript">
if (navigator.userAgent.match(/iPhone/i) != null){
document.write('<meta name="viewport" content="width=width=320.1,initial-scale=.5,minimum-scale=.5,maximum-scale=.5,user-scalable=no" />');
} else
if (navigator.userAgent.match(/iPad/i) != null){
document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
} else {
document.write('<meta name="viewport" content="width=device-width,initial-scale=.5,minimum-scale=.5,maximum-scale=.5,user-scalable=no,target-densityDpi=310" />');
}
</script>
<style type="text/css">
body {
width: 960px;
height: 540px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
:-webkit-full-screen {
background: #0e2a38;
}
:-moz-full-screen {
background: #0e2a38;
}
:-ms-fullscreen {
background: #0e2a38;
}
:full-screen {
background: #0e2a38;
}
:fullscreen {
background: #0e2a38;
}
.wrap {
margin-top: 200px;
perspective: 1000px;
perspective-origin: 50% 50%;
}
.cube {
margin: auto;
position: relative;
height: 300px;
width: 300px;
transform-style: preserve-3d;
}
.cube > div {
position: absolute;
box-sizing: border-box;
height: 100%;
width: 100%;
opacity: 0.8;
background-color: #222;
color: #fff;
}
.front {
transform: translateZ(200px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {
transform: rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(270deg) translateY(100px);
transform-origin: bottom center;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube {
animation: rotate 15s infinite linear;
}
.no-touch .cube:hover .front {
transform: translateZ(300px) !important;
}
.no-touch .cube:hover .back {
transform: translateZ(-200px) rotateY(180deg);
}
.no-touch .cube:hover .right {
transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}
.no-touch .cube:hover .left {
transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}
.no-touch .cube:hover .top {
transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}
.no-touch .cube:hover .bottom {
transform: rotateX(270deg) translateZ(100px) translateY(100px);
}
.cube > div {
transition: transform 0.2s ease-in;
}
</style>
</head>
<body>
<div class="wrap" id="foo">
<div class="cube" id="foo2">
<div class="front" id="front">
<video id="player1"></div>
</div>
<div class="back">
<video class="video-js" id="player2" data-setup='{}' controls preload="auto"></video>
</div>
<div class="top">
<video id="player3" class="video-js vjs-default" data-setup='{}' controls preload="auto" src="http://content.jwplatform.com/videos/bkaovAYt-el5vTWpr.mp4"></video>
</div>
<div class="bottom">
<video id="player4" class="video-js" data-setup='{}' controls preload="auto" src="http://video-js.zencoder.com/oceans.mp4">
</video>
</div>
<div class="left">
<video id="player5" class="video-js"></video>
</div>
<div class="right">
<video id="player6" class="video-js"></video>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
var r=Math.random();
vjs("player1").setup({
source: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
poster: "http://assets-jp.jwpsrv.com/thumbs/i8oQD9zd-720.jpg",
skin: "cube.xml"
});
video-js("player2").setup({
src: "http://content.jwplatform.com/videos/bkaovAYt-el5vTWpr.mp4",
source: "http://content.jwplatform.com/videos/bkaovAYt-el5vTWpr.mp4",
poster: "http://assets-jp.jwpsrv.com/thumbs/bkaovAYt-720.jpg",
stretching: "fill",
width: 300,
height: 300,
repeat: "true",
skin: "cube.xml"
});
video-js("player3").source
src: "http://content.jwplatform.com/videos/rO8PIVrl-52qL9xLP.mp4",
poster: "http://assets-jp.jwpsrv.com/thumbs/rO8PIVrl-720.jpg",
stretching: "fill",
width: 300,
height: 300,
repeat: "true",
skin: "cube.xml"
});
video-js("player4").setup({
file: "http://content.jwplatform.com/videos/3XnJSIm4-el5vTWpr.mp4",
image: "http://content.jwplatform.com/thumbs/3XnJSIm4-720.jpg",
stretching: "fill",
width: 300,
height: 300,
repeat: "true",
skin: "cube.xml",
html5player: "cube.html5.js?r="+r
});
video-js("player5").setup({
file: "http://content.jwplatform.com/videos/Wf8BfcSt-DZ7jSYgM.mp4",
image: "http://content.jwplatform.com/thumbs/Wf8BfcSt-720.jpg",
stretching: "fill",
width: 300,
height: 300,
repeat: "true",
skin: "cube.xml"
});
video-js("player6").setup({
file: "http://content.jwplatform.com/videos/lWMJeVvV-DZ7jSYgM.mp4",
image: "http://content.jwplatform.com/thumbs/lWMJeVvV-720.jpg",
stretching: "fill",
width: 300,
height: 300,
repeat: "true",
skin: "cube.xml"
});
video-js("player1").onBeforePlay(function() {
video-js("player1").setMute(false);
jwplayer("player2").setMute(true);
jwplayer("player3").setMute(true);
jwplayer("player4").setMute(true);
jwplayer("player5").setMute(true);
jwplayer("player6").setMute(true);
});
jwplayer("player1").onPlay(function() {
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null){
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
if(jwplayer("player3").getState() == "PLAYING"){
jwplayer("player3").pause();
}
if(jwplayer("player4").getState() == "PLAYING"){
jwplayer("player4").pause();
}
if(jwplayer("player5").getState() == "PLAYING"){
jwplayer("player5").pause();
}
if(jwplayer("player6").getState() == "PLAYING"){
jwplayer("player6").pause();
}
}
});
jwplayer("player2").onBeforePlay(function() {
jwplayer("player1").setMute(true);
jwplayer("player2").setMute(false);
jwplayer("player3").setMute(true);
jwplayer("player4").setMute(true);
jwplayer("player5").setMute(true);
jwplayer("player6").setMute(true);
});
jwplayer("player2").onPlay(function() {
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
if(jwplayer("player3").getState() == "PLAYING"){
jwplayer("player3").pause();
}
if(jwplayer("player4").getState() == "PLAYING"){
jwplayer("player4").pause();
}
if(jwplayer("player5").getState() == "PLAYING"){
jwplayer("player5").pause();
}
if(jwplayer("player6").getState() == "PLAYING"){
jwplayer("player6").pause();
}
}
});
jwplayer("player3").onBeforePlay(function() {
jwplayer("player1").setMute(true);
jwplayer("player2").setMute(true);
jwplayer("player3").setMute(false);
jwplayer("player4").setMute(true);
jwplayer("player5").setMute(true);
jwplayer("player6").setMute(true);
});
jwplayer("player3").onPlay(function() {
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
if(jwplayer("player4").getState() == "PLAYING"){
jwplayer("player4").pause();
}
if(jwplayer("player5").getState() == "PLAYING"){
jwplayer("player5").pause();
}
if(jwplayer("player6").getState() == "PLAYING"){
jwplayer("player6").pause();
}
}
});
jwplayer("player4").onBeforePlay(function() {
jwplayer("player1").setMute(true);
jwplayer("player2").setMute(true);
jwplayer("player3").setMute(true);
jwplayer("player4").setMute(false);
jwplayer("player5").setMute(true);
jwplayer("player6").setMute(true);
});
jwplayer("player4").onPlay(function() {
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
if(jwplayer("player3").getState() == "PLAYING"){
jwplayer("player3").pause();
}
if(jwplayer("player5").getState() == "PLAYING"){
jwplayer("player5").pause();
}
if(jwplayer("player6").getState() == "PLAYING"){
jwplayer("player6").pause();
}
}
});
jwplayer("player5").onBeforePlay(function() {
jwplayer("player1").setMute(true);
jwplayer("player2").setMute(true);
jwplayer("player3").setMute(true);
jwplayer("player4").setMute(true);
jwplayer("player5").setMute(false);
jwplayer("player6").setMute(true);
});
jwplayer("player5").onPlay(function() {
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
if(jwplayer("player3").getState() == "PLAYING"){
jwplayer("player3").pause();
}
if(jwplayer("player4").getState() == "PLAYING"){
jwplayer("player4").pause();
}
if(jwplayer("player6").getState() == "PLAYING"){
jwplayer("player6").pause();
}
}
});
jwplayer("player6").onBeforePlay(function() {
jwplayer("player1").setMute(true);
jwplayer("player2").setMute(true);
jwplayer("player3").setMute(true);
jwplayer("player4").setMute(true);
jwplayer("player5").setMute(true);
jwplayer("player6").setMute(false);
});
jwplayer("player6").onPlay(function() {
if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null){
if(jwplayer("player1").getState() == "PLAYING"){
jwplayer("player1").pause();
}
if(jwplayer("player2").getState() == "PLAYING"){
jwplayer("player2").pause();
}
if(jwplayer("player3").getState() == "PLAYING"){
jwplayer("player3").pause();
}
if(jwplayer("player4").getState() == "PLAYING"){
jwplayer("player4").pause();
}
if(jwplayer("player5").getState() == "PLAYING"){
jwplayer("player5").pause();
}
}
});
</script>
<script type="text/javascript">
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
document.getElementById('foo2').style.height = "600px";
document.getElementById('foo2').style.width = "600px";
document.getElementById('front').setAttribute('style', 'transform: translateZ(500px) !important;');
jwplayer("player1").resize(600,600);
jwplayer("player2").resize(600,600);
jwplayer("player3").resize(600,600);
jwplayer("player4").resize(600,600);
jwplayer("player5").resize(600,600);
jwplayer("player6").resize(600,600);
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
document.getElementById('foo2').style.height = "300px";
document.getElementById('foo2').style.width = "300px";
document.getElementById('front').setAttribute('style', 'transform: translateZ(200px);');
jwplayer("player1").resize(300,300);
jwplayer("player2").resize(300,300);
jwplayer("player3").resize(300,300);
jwplayer("player4").resize(300,300);
jwplayer("player5").resize(300,300);
jwplayer("player6").resize(300,300);
}
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
exitFullscreen();
}
};
exitFullscreen();
document.onkeyup = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
exitFullscreen();
}
};
document.addEventListener("mozfullscreenchange", function () {
if (document.mozFullScreen) {
launchFullscreen();
} else {
exitFullscreen();
}
}, false);
document.addEventListener("webkitfullscreenchange", function () {
if (document.webkitIsFullScreen == false) {
document.getElementById('foo2').style.height = "300px";
document.getElementById('foo2').style.width = "300px";
document.getElementById('front').setAttribute('style', 'transform: translateZ(200px);');
jwplayer("player1").resize(300,300);
jwplayer("player2").resize(300,300);
jwplayer("player3").resize(300,300);
jwplayer("player4").resize(300,300);
jwplayer("player5").resize(300,300);
jwplayer("player6").resize(300,300);
}
}, false);
</script>
<div style="position:absolute;bottom:10px;right:10px;" id="btns">
<button onclick="launchFullscreen(document.documentElement);">Launch Fullscreen</button>
<button onclick="exitFullscreen();">Hide Fullscreen</button>
</div>
<script type="text/javascript">
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
if (Idx > 0) {
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
} else if (!!navigator.userAgent.match(/Trident\/7\./)) {
return 11;
} else {
return 0;
}
}
var defaultAndroid = ((navigator.userAgent.indexOf('Mozilla/5.0') > -1 && navigator.userAgent.indexOf('Android ') > -1 && navigator.userAgent.indexOf('AppleWebKit') > -1) && !(navigator.userAgent.indexOf('Chrome') > -1));
if(window.opera || GetIEVersion() > 0 || defaultAndroid){
document.getElementById('foo').innerHTML = '<h1 style="font-family:arial;color:#fff;text-align:center;">This is an unsupported browser!</h1>';
document.getElementById('btns').innerHTML = '';
}
if (navigator.userAgent.match(/iPhone/i) != null || navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.indexOf('Android ') > -1 || defaultAndroid){
document.getElementById('btns').innerHTML = '';
}
history.pushState({ page: 1 }, "title 1", "#_");
window.onhashchange = function (event) {
window.location.hash = "_";
};
</script>
</body>
</html>
