Skip to content

Instantly share code, notes, and snippets.

@tokufxug

tokufxug/index.html

Created October 20, 2021 05:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tokufxug/45392e7d45760c557672a4d61d67d307 to your computer and use it in GitHub Desktop.
Save tokufxug/45392e7d45760c557672a4d61d67d307 to your computer and use it in GitHub Desktop.
Download ZIP
Zappar Video Demo Application
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<meta name="application-name" content="Zappar Video Demo Application">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<title>Zappar Video Demo Application</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="zappar-aframe/zappar-aframe.js"></script>
<script>
let myImageGroup = null;
let video = null;
let eVideo = null;
function onload()
{
myImageGroup = document.getElementById("image-group");
eVideo = document.getElementById("e-video");
video = document.querySelector("#video");
myImageGroup.addEventListener("zappar-visible", () => {
video.play();
eVideo.setAttribute("visible", true);
});
myImageGroup.addEventListener("zappar-notvisible", () => {
video.pause();
eVideo.setAttribute("visible", false);
});
}
</script>
</head>
<body onload="onload();">
<a-scene>
<a-assets>
<video id="video" muted webkit-playsinline playsinline loop="true" src="video.mp4"></video>
</a-assets>
<a-entity zappar-permissions-ui id="permissions">
<!-- Remove the text entity to use Zappar's default permission denied UI -->
<a-entity text="value: Please reload the page, accepting the camera permissions." position="0 0 -2"></a-entity>
</a-entity>
</a-entity>
<a-camera zappar-camera cursor="rayOrigin: mouse; fuse: false;" raycaster="objects: .collidable"></a-camera>
<a-entity zappar-image="target: track.zpt" id="image-group">
<a-video id="e-video" src="#video" width="4.5" height="2"></a-video>
</a-entity>
</a-scene>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment