JSFiddle - React, Tailwind, and code Playground

by anil001ry

HTML

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
    <title>Examples • Animation</title>
    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
    <script src="../bundle.js"></script>
    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
  </head>
  <body>
    <a-scene environment="preset: checkerboard">
      <!-- Player -->
      <a-entity id="rig" movement-controls position="0 0 5">
        <a-entity id="camera"
                  camera
                  position="0 1.6 0"
                  look-controls="pointerLockEnabled: true"></a-entity>
      </a-entity>

      <!-- Animation
           See: http://threejs.org/examples/#webgl_animation_scene
      -->
      <a-entity position="0 1 0"
                animation-mixer="clip: *;"
                gltf-model="src: url(https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/AnimatedMorphSphere/glTF/AnimatedMorphSphere.gltf);">
      </a-entity>
    </a-scene>
  </body>
</html>

JavaScript

var vidElement = document.getElementById('myvideo');
var vidSources = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
  // update the active video index
  activeVideo = (++activeVideo) % vidSources.length;
  if(activeVideo === vidSources.length){
    activeVideo = 0;
  }

  // update the video source and play
  vidElement.src = vidSources[activeVideo];
  vidElement.play();
});