A-Frame Course - Source of /examples/1800-customcomponents-05-time-based-media.html

<!DOCTYPE html>
<html>
  <head>
    <title>Custom components - 04 - Time-based Media</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component/dist/aframe-event-set-component.min.js"></script>

    <script>
       AFRAME.registerComponent("video-play", {
        schema: {
          event: {type: "string"},
          video:  { type: "selector" }
        },
        init: function () {
            this.el.addEventListener(this.data.event, this.playVideo.bind(this));

        },
        playVideo: function () {
           console.log("Playing video")
           this.data.video.play();
        }
      });

      AFRAME.registerComponent("video-events", {
        schema: {
          video:  { type: "selector" }
        },
        init: function () {
            this.data.video.addEventListener("play", this.onVideoPlay.bind(this));
            this.data.video.addEventListener("pause", this.onVideoPause.bind(this));            
            this.data.video.addEventListener("ended", this.onVideoEnded.bind(this));
        },
        onVideoPlay: function () {
          console.log("Video play");
          this.el.emit("video_play");
        },
        onVideoPause: function () {
          console.log("Video pause");
          this.el.emit("video_pause");
        },      
        onVideoEnded: function () {
          console.log("Video ended");
          this.el.emit("video_ended");
        },
      });
    </script>
    <script src="../js/livecode.js"></script>
  </head>
  <body>
    <a-scene cursor="rayOrigin: mouse">
      <a-assets>
        <video
          id="countdown"            
          preload="auto"
          src="https://cdn.glitch.global/80978ab7-9db6-45ae-bc43-4fab16bdbb6e/Countdown1.mp4?v=1641399419809"
        ></video>
         <video
          id="closeup"    
          preload="auto"
          src="https://cdn.glitch.global/80978ab7-9db6-45ae-bc43-4fab16bdbb6e/CloseUp.mov?v=1641399429388"
        ></video>
      </a-assets>

     <a-plane 
              video-events="video: #countdown"
              video-play="event: video_ended; video: #closeup" 

              src="#countdown" 
              position="-1 1.6 -2"                      
      ></a-plane>

      <a-plane src="#closeup" position="1 1.6 -2" ></a-plane>

      <a-box 
             video-play="event: click; video: #countdown" 

             position="0 1 -1.5" 
             width="0.5" 
             height="0.5" 
             depth="0.5" 
             color="green">
             <a-text value="Click to \nStart" width="2" position="0 0 0.25" align="center"></a-text>
       </a-box>

      <a-camera id="camera"> </a-camera>
      <a-sky color="lightblue"></a-sky>
    </a-scene>
  </body>
</html>