jarmitage/dynamic-video-load-test.html

## dynamic-video-load-test.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>'Dominoes' prototype</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="https://aframe.io/releases/0.1.2/aframe.js"></script>
  </head>
  <body>
    <a-scene stats="true" id="scene">
      <a-assets id="assets">
      </a-assets>
    </a-scene>
    <script type="text/javascript">

      window.onload = function() {
        window.setTimeout(init, 2000);
        window.setTimeout(timeoutFunction, 5000);
      };

      function timeoutFunction () {
        unload('v', 'avideo2');
      }

      function init() {
        createVideoAssetWithSource('v', 'mov/Q1.mp4');
        var material = "shader: flat; src: #v;";
        var geometry = "primitive: plane; width: 160; height: 90;";
        var position = "0 60 -250";
        var rotation = "0 35 0";
        createEntity('avideo2', material, geometry, position, rotation);
      }

      function createVideoAsset(id) {
        var v = document.createElement('video');
        v.id = name;
        v.preload = "auto";
        v.autoplay = "false";
        v.crossOrigin = "anonymous";
        document.getElementById('assets').appendChild(v);
      }

      function createVideoAssetWithSource(id, src) {
        var v = document.createElement('video');
        v.id = id;
        v.preload = "auto";
        v.autoplay = "false";
        v.crossOrigin = "anonymous";
        v.src = src;
        v.pause();
        document.getElementById('assets').appendChild(v);
      }

      function createEntity(id, material, geometry, position, rotation) {
        var e = document.createElement('a-entity');
        e.id = id;
        e.setAttribute('material', material);
        e.setAttribute('geometry', geometry);
        e.setAttribute('position', position);
        e.setAttribute('rotation', rotation);
        insertAfter(e, document.getElementById('assets'));
      }

      function play(videoEl) {
        document.getElementById(videoEl).play();
      }

      function pause(videoEl) {
        document.getElementById(videoEl).pause();
      }

      function seek(videoEl, time) {
        document.getElementById(videoEl).currentTime = time;
      }

      function unload(videoEl, entityEl){
        unloadMaterial(entityEl);
        unloadVideo(videoEl);
        removeElement(entityEl);
        removeElement(videoEl);
      }

      function removeElement(el){
        var node = document.getElementById(el);
        if (node.parentNode)
          node.parentNode.removeChild(node);
        else
          return false;
      }

      function unloadMaterial(entityEl){
        document.getElementById(entityEl).setAttribute('material', {src: ''});
      }

      function unloadVideo(videoEl){
        var v = document.getElementById(videoEl);
        v.pause();
        v.src = "";
        v.load();
      }

      function insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
      }

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>'Dominoes' prototype</title>
	<meta name="description" content="Hello, World! • A-Frame">
	<script src="https://aframe.io/releases/0.1.2/aframe.js"></script>
	</head>
	<body>
	<a-scene stats="true" id="scene">
	<a-assets id="assets">
	</a-assets>
	</a-scene>
	<script type="text/javascript">

	window.onload = function() {
	window.setTimeout(init, 2000);
	window.setTimeout(timeoutFunction, 5000);
	};

	function timeoutFunction () {
	unload('v', 'avideo2');
	}

	function init() {
	createVideoAssetWithSource('v', 'mov/Q1.mp4');
	var material = "shader: flat; src: #v;";
	var geometry = "primitive: plane; width: 160; height: 90;";
	var position = "0 60 -250";
	var rotation = "0 35 0";
	createEntity('avideo2', material, geometry, position, rotation);
	}

	function createVideoAsset(id) {
	var v = document.createElement('video');
	v.id = name;
	v.preload = "auto";
	v.autoplay = "false";
	v.crossOrigin = "anonymous";
	document.getElementById('assets').appendChild(v);
	}

	function createVideoAssetWithSource(id, src) {
	var v = document.createElement('video');
	v.id = id;
	v.preload = "auto";
	v.autoplay = "false";
	v.crossOrigin = "anonymous";
	v.src = src;
	v.pause();
	document.getElementById('assets').appendChild(v);
	}

	function createEntity(id, material, geometry, position, rotation) {
	var e = document.createElement('a-entity');
	e.id = id;
	e.setAttribute('material', material);
	e.setAttribute('geometry', geometry);
	e.setAttribute('position', position);
	e.setAttribute('rotation', rotation);
	insertAfter(e, document.getElementById('assets'));
	}

	function play(videoEl) {
	document.getElementById(videoEl).play();
	}

	function pause(videoEl) {
	document.getElementById(videoEl).pause();
	}

	function seek(videoEl, time) {
	document.getElementById(videoEl).currentTime = time;
	}

	function unload(videoEl, entityEl){
	unloadMaterial(entityEl);
	unloadVideo(videoEl);
	removeElement(entityEl);
	removeElement(videoEl);
	}

	function removeElement(el){
	var node = document.getElementById(el);
	if (node.parentNode)
	node.parentNode.removeChild(node);
	else
	return false;
	}

	function unloadMaterial(entityEl){
	document.getElementById(entityEl).setAttribute('material', {src: ''});
	}

	function unloadVideo(videoEl){
	var v = document.getElementById(videoEl);
	v.pause();
	v.src = "";
	v.load();
	}

	function insertAfter(newNode, referenceNode) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
	}

	</script>
	</body>
	</html>