1

by anil001ry

HTML

<html>
  <head>
     <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
    <!-- <script src="aframe-ar.js"></script> use this (v1.6) if this demo ever breaks-->
  </head>
  <body>
    <a id="playButton" onclick="play('alpha')"><div class="btn btn-primary play-overlay menu-overlay"></div></a>
    <a-scene >
    <a-assets>
        <video id="alpha" autoplay loop="true" src="https://cdn.glitch.com/e3796de4-705d-4b33-a77c-084a0b428d27%2FAlphaTestVideo.webm?1552438409173"></video>
    </a-assets>

    <!-- Using the asset management system. -->
   
    <a-marker preset='hiro' vidhandler>
           <a-video id = "vid"  rotation =  "-62.584 -3.936 4.509"  scale="5 5 1" src="#alpha">
      <video scale= "20 20 1" src="#source"></video></a-video>
    </a-marker>
    </a-scene>
  </body>
  
  <script>
    AFRAME.registerComponent('vidhandler', {
    // ...
    init: function () {
      // Set up initial state and variables.
      this.toggle = false;
      this.vid = document.querySelector("#vid");
      this.vid.pause();
      
    },
    tick: function () {
      if (this.el.object3D.visible == true) {
        if (!this.toggle) {
          this.toggle = true;
          this.vid.play();
          
        }
      } else {
        this.toggle = false;
        this.vid.pause();
      }
    }
  });
  
    function play(id){
      var aVideoAsset = document.querySelector('#' + id);
      aVideoAsset.play().catch(function (error) {
        aVideoAsset.pause();
        hideOrShow("playButton");
      });
      aVideoAsset.setAttribute('loop', 'false');
      hideOrShow('playButton');
    }
    function hideOrShow(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
 
  </script>
</html>

CSS

.play-overlay {
    z-index: 99999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    box-sizing: border-box;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 12px 24px;
    padding-bottom: 0px;
    background: rgba(0, 123, 255) url(./assets/white-play-256.png) center no-repeat;
    background-size: 40px 40px;
  }
.play-overlay:hover {
  background: rgba(0, 0, 0, 0.2) url(./assets/white-play-256.png) center no-repeat;
  background-size: 40px 40px;
}

JavaScript

/* alert("hi");
console.log("hi 1"); */
/* var name = prompt("Enter Name");
alert(name); */
/* var result= confirm("Are You Sure");
document.write(result); */