手順

index.htmlに動画を透過するマテリアルのライブラリをインポートする。

<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

オブジェクトに透過マテリアルを設定して動画を再生するコンポーネントを作成する。

<script>
    AFRAME.registerComponent("play-video", {
      schema: {
        video: { type: "string" },
        canstop: { type: "bool" },
      },
      init: function () {
        this.v = document.querySelector(this.data.video);
    
        this.el.setAttribute("class", "cantap");
        this.el.setAttribute("material", {
          src: this.v,
          shader: "chromakey",
          // colorにはクロマキーの色を指定
          color: "0.02 0.08 0.99",
          side: "double",
        });
    
        this.playing = false;
        this.playstart = this.playstart.bind(this);
    
        // ビデオを再生するイベントを設定　
        // 以下はAR.jsでマーカーが読み込まれた時(markerFound)と
        // 動画オブジェクトがクリックされた時に再生するように設定している
        window.addEventListener("markerFound", (event) => {
          this.playstart();
        });
        this.el.addEventListener("click", this.playstart);
      },
    
      playstart: function () {
        if (!this.playing) {
          this.v.play();
          this.playing = true;
        } else if (this.data.canstop) {
          this.v.pause();
          this.playing = false;
        }
      },
    });
</script>

<a-assets>内に再生したいビデオを配置。

<a-assets>
    <video
      id="myvideo"
      loop
      autoplay
      muted
      crossorigin="anonymous"
      src="< 動画のパス >"
    ></video>
</a-assets>

シーン上に動画オブジェクトを配置。
play-videoコンポーネントを追加して、動画のidを設定する。

<a-entity
  play-video="video: #myvideo; canstop: false;"
  geometry="primitive: plane;"
  scale="1 1 1"
  position="0 -0.5 1"
></a-entity>

コード全体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Chromakey video</title>

    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>

    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

    <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

    <script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

    <script>
      AFRAME.registerComponent("play-video", {
        schema: {
          video: { type: "string" },
          canstop: { type: "bool" },
        },
        init: function () {
          this.v = document.querySelector(this.data.video);

          this.el.setAttribute("class", "cantap");
          this.el.setAttribute("material", {
            src: this.v,
            shader: "chromakey",
            // colorにはクロマキーの色を指定
            color: "0.02 0.08 0.99",
            side: "double",
          });

          this.playing = false;
          this.playstart = this.playstart.bind(this);

          // ビデオを再生するイベントを設定　
          // 以下はAR.jsでマーカーが読み込まれた時(markerFound)と
          // 動画オブジェクトがクリックされた時に再生するように設定している
          window.addEventListener("markerFound", (event) => {
            this.playstart();
          });
          this.el.addEventListener("click", this.playstart);
        },

        playstart: function () {
          if (!this.playing) {
            this.v.play();
            this.playing = true;
          } else if (this.data.canstop) {
            this.v.pause();
            this.playing = false;
          }
        },
      });
    </script>
  </head>

  <body>
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true; gammaOutput: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: true;"
    >
      <a-assets>
        <video
          id="myvideo"
          muted
          playsinline
          crossorigin="anonymous"
          loop="true"
          src="< 動画のパス >"
        ></video>
      </a-assets>

      <a-marker preset="hiro">
        <a-entity
          play-video="video: #myvideo; canstop: false;"
          geometry="primitive: plane;"
          scale="1 1 1"
          position="0 0 0"
        ></a-entity>
      </a-marker>

      <a-light type="ambient" color="#ffffff"></a-light>

      <a-entity
        camera=""
        position=""
        rotation=""
        scale=""
        visible=""
      ></a-entity>
    </a-scene>
  </body>
</html>

参考記事