Skip to content

Instantly share code, notes, and snippets.

@kfarr

kfarr/HapYak rotation from Videojs-vr

Created February 21, 2017 22:20
Show Gist options
  • Save kfarr/1f5216765c8568d8c86ac0e57c37a6cc to your computer and use it in GitHub Desktop.
Save kfarr/1f5216765c8568d8c86ac0e57c37a6cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HapYak rotation from Videojs-vr
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>videojs-vr example</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script src="./dist/player-skin.js"></script>
<script src="./dist/player.full.js"></script>
<style>
html{height:100%;width:100%;padding:0;margin:0}
body{height:100%;width:100%;padding:0;margin:0;overflow:hidden}
object{height:100%;width:100%}
#video-container {width:100%;height:100%}
/* Info panel */
.css360InfoPanel {
position: fixed;
bottom: 50%;
right: 0;
background-color: rgba(0,0,0,0.6);
color: #fff;
padding: 20px;
text-align: right;
}
</style>
</head>
<body>
<video id="video-container" class="video-js vjs-default-skin" preload="auto" crossOrigin="anonymous" width="100%" height="100%" data-setup="{}" controls playsinline webkit-playsinline>
<!-- iOS devices need a local/relative source (same host/domain) due to CORS bug: https://bugs.webkit.org/show_bug.cgi?id=135379 -->
<source src="videos/yoga360.mp4" type="video/mp4">
</video>
<div class="css360InfoPanel">
<div class="css360InfoPanelRotation">
<div id="css360InfoPanelRotation-x">x: 0.00</div>
<div id="css360InfoPanelRotation-y">y: 0.00</div>
<div id="css360InfoPanelRotation-z">z: 0.00</div>
</div>
</div>
<!--
video.js will automatically initialize the video element since it's loaded in
the head of the document but you still need to configure and initialize the
plugin.
-->
<script>
(function(){
var player = videojs( '#video-container', {
techOrder: ['html5']
});
player.vr({projection: "360"});
window.setInterval(function () {
var r2d = 180 / Math.PI;
['x', 'y', 'z'].forEach(function (axis) {
document.getElementById('css360InfoPanelRotation-' + axis).innerHTML = axis + ': ' + (player.camera.instance.rotation[axis] * r2d).toFixed(2);
});
}, 500);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment