video augmented-reality aframe ar.js artoolkit

Why does my video only play sound and no video with ARJS?

I'm building an Augmented Reality app with ARJS. I'm using an image as a marker and it seems to be working. The goal is to play a video when the image tracker detects the correct image, however, it plays only the audio and not the whole video.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="css/styles.css">
  <script src="./js/image-tracker/aframe-master.min.js"></script>
  <script src="./js/image-tracker/aframe-ar-nft.js"></script>
  <title>Test</title>
  <script>
    AFRAME.registerComponent('controller', {
        init: function() {
          this.toggle = false;
          this.video = document.querySelector('#video');
          this.video.pause();
        },

        tick: function() {
          if (this.el.object3D.visible === true) {
            if (!this.toggle) {
              this.toggle = true;
              this.video.play();
            }
          } else {
            this.toggle = false;
            this.video.pause();
          }
        }
      })
  </script>
</head>

<body>
  <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="video" src="http://localhost:5000/assets/animation.mp4" webkit-playsinline playsinline></video>
    </a-assets>

    <a-nft
      controller
      type="nft"
      url="./image_descriptors/car"
      smooth="true"
      smoothCount="10"
      smoothTolerance="0.01"
      smoothThreshold="5"
    >
      <a-video
        width="1.75"
        height="2"
        position="200 0 -10"
        rotation="0 90 0"
        src="#video"
      ></a-video>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>

Solution

There could be multiple reasons, here are some of them:

Make sure there are no console errors and the scene loads properly (your sandbox gave me out of memory!!! issues, also there were some CORS issues).
Make sure that the video is placed on top of the marker. I'd use an oversized box (or the inspector) to find out where is the item, and adjust the position / scale.

I've made NFT descriptors with your car.jpg resized to 1024x1024, and it seems to be working link to the forked sandbox with new descriptors :