AR.jsを使って音声ありの動画を再生したい

AR.jsを使って音声ありの動画を再生したいです

今、AR.jsを用いて動画を再生しようとしています。

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-assets>
	    <video id="ar-video" autoplay loop="true" preload="auto" src="test0818.mp4"></video>
		<audio src="videopath" autoplay></audio>
	  </a-assets>
	  <!-- デバッグ用の画面表示、VR用のボタンをそれぞれ非表示に -->
    <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
      <!-- 今回作成した『.patt』ファイルを読み込む -->
      <a-marker type='pattern' url='pattern-omotaku.patt'>
	      <a-video src="#ar-video" width="4.6" height="4.6" position="0 0 0" rotation="270 0 0" play="true"></a-video>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
    
    <script>
      window.addEventListener('click', function () {
      var v = document.querySelector('#ar-video');
      v.play();
audioElement.play();
      });
    </script>
  </body>
</html>

このようなコードを書くと一応音声ありで動画を再生することができるのですが、
1度再生してしまうと、マーカーが見えなくなっても音声だけ再生され続けてしまうので
マーカーを認識したら再生、マーカーが認識できなかったら停止するようにするには
どのようにしたら良いでしょうか。

わたし自身コードに不慣れなため、実際のコードをご提示して回答いただけるととても助かります。

##追記

button.addEventListener('touchstart', () => {
audio.muted = true; // ミュート有効
audio.play(); // 動画再生
audio.pause(); // 動画停止
audio.muted = false; // ミュート無効
audio.currentTime = 0; // 開始秒数を戻す
});
// マーカー認識されたら...
marker.addEventListener('markerFound', () => {
audio.play(); // 動画再生
});

このようなものを試してみましたがダメでした

<html>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"> </script>
<script>
    AFRAME.registerComponent('registerevents', {
        init: function () {
            var marker = this.el;

            // マーカーを検出したイベントの登録
            marker.addEventListener('markerFound', function () {
                var markerId = marker.id;
                console.log('markerFound', markerId);

                // アニメーションの開始
                document.querySelector('#box').emit('markerfound');
            });

            // マーカーを見失ったイベントの登録
            marker.addEventListener('markerLost', function () {
                var markerId = marker.id;
                console.log('markerLost', markerId);

                // アニメーションの停止
                document.querySelector('#box').emit('markerlost');
            });
        }
    });
</script>

<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
        <a-marker preset="hiro" id="marker-hiro" registerevents>
            <a-box id="box" position="0 0.5 0" wireframe="true">
                <a-animation attribute="position" from="0 0.5 0" to="0 2.5 0" dur="5000" repeat="indefinite" begin="markerfound" end="markerlost">
                </a-animation>
            </a-box>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>

</html>

こちらのコードを応用したらできるかなと思ったのですが、
初心者すぎて応用の仕方が分からず困っています。
回答のほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

質問文に追記されている、「markerFound / markerLost」の処理を利用すると以下の様な実装で再生・一時停止されませんでしょうか。

変更した大きな箇所としては以下

<script>タグ内で、「markerFound / markerLost」のイベントを登録（質問に追記されている内容を利用）
Videoオブジェクト格納用の変数を定義
「markerFound / markerLost」それぞれのイベントで、Videoオブジェクトに対して再生・一時停止の処理を実行

html
1<html>
2<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
3<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
4    <body style='margin : 0px; overflow: hidden;'>
5    <a-assets>
6        <video id="ar-video" autoplay loop="true" preload="auto" src="test0818.mp4"></video>
7        <audio src="videopath" autoplay></audio>
8    </a-assets>
9    
10    <!-- デバッグ用の画面表示、VR用のボタンをそれぞれ非表示に -->
11    <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
12    <!-- 今回作成した『.patt』ファイルを読み込む -->
13    <!-- ※こちらで試す時には、"hiro"のマーカー定義に変更して確認しました -->
14    <a-marker type='pattern' url='pattern-omotaku.patt'>
15        <a-video src="#ar-video" width="4.6" height="4.6" position="0 0 0" rotation="270 0 0" play="true"></a-video>
16    </a-marker>
17    <a-entity camera></a-entity>
18    </a-scene>
19
20    <script>
21        // ビデオ格納用の変数定義を追加
22        var video = null;
23
24        AFRAME.registerComponent('registerevents', {
25            init: function () {
26                var marker = this.el;
27
28                // マーカーを検出したイベントの登録
29                marker.addEventListener('markerFound', function () {
30
31                    // マーカー認識したら、ビデオ再生
32                    if (video == null) {
33                        video = document.querySelector('#ar-video');
34                    }
35                    video.play();
36                });
37
38                // マーカーを見失ったイベントの登録
39                marker.addEventListener('markerLost', function () {
40                    
41                    // マーカー認識が外れたら、、ビデオ停止
42                    video.pause();
43                });
44            }
45        });
46
47        /* ビデオクリックで再生するイベントは、一旦コメントアウトしました
48        window.addEventListener('click', function () {
49            video = document.querySelector('#ar-video');
50            video.play();
51        });
52        */
53    </script>
54    </body>
55</html>