index2.html

<!DOCTYPE html>
<html>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

	<style>
	  .arjs-loader {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
	  }

	  .arjs-loader div {
		text-align: center;
		font-size: 1.25em;
		color: white;
	  }
	</style>

	<!-- rawgithack development URL -->
	<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>

	<body style='margin : 0px; overflow: hidden;'>
	  <div class="arjs-loader">
		<div>Loading, please wait...</div>
	  </div>
		<a-scene
			vr-mode-ui="enabled: false;"
			renderer="logarithmicDepthBuffer: true;"
			embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
			<a-assets>
				<video id="ca-video" muted preload loop playsinline src="video.mp4"></video>
			</a-assets>
			

			<a-nft
				type='nft' url='https://arjs-cors-proxy.herokuapp.com/https://shifugate.github.io/c-a/assets/camarker2'
				smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5' vidhandler>
				<a-entity rotation="90 0 0">
					<a-entity scale="1 -1 1">
						<a-video transparent="true" src="#ca-video" width="512" height="288" position="0 100 -10"></a-video>
					</a-entity>
				</a-entity>
			</a-nft>
			<a-entity camera></a-entity>
		</a-scene>
	</body>
	<script>
		AFRAME.registerComponent('vidhandler', {
			init: function () {
				var marker = this.el;
				
				this.vid = document.querySelector('#ca-video');
				
				marker.addEventListener(
					"markerFound",
					function () {
						this.vid.play();
					}.bind(this)
				);
				
				marker.addEventListener(
					"markerLost",
					function () {
						this.vid.pause();
						this.vid.currTime = 0;
					}.bind(this)
				);
			}
		});
		
		window.addEventListener('click', function () {
		  var preload = document.querySelector('#ca-video');
		  preload.play();
		});
	</script>
</html>