参考にしたもの
https://github.com/jeromeetienne/AR.js/issues/400のIssueの末尾に掲載されている、https://jsfiddle.net/anil001ry/twfm4ay6/のコードをもとに実装しました。基本的には、このコードを使えば動きます。
注意点
上記のコードはデスクトップでは簡単に動作確認できるのですが、スマホで全然動かなくて、数日悩みました。結果、以下のように対応すれば、無音の動画であればモバイルでも再生できるということが判明しました。
ビデオがスマホ(iOS)で動かない問題への対策1
iOSでの動画再生にはいろいろ制約があるようで、動画をユーザーの自発的な行為（タップするなど）なしに自動再生できないような仕組みになっているようです。そのためいくつかコードに埋め込んでおくべきものが、本家A-FRAMEの以下のページでまとめられています。
https://aframe.io/docs/0.8.0/primitives/a-video.html
上記サイトにはmetaタグと、webkit-playsinline と playsinlineを追記し、ページをホームスクリーンにピンすることで動く、とあります。
対策2を実施すれば、わざわざホームスクリーンにピンしなくても、ブラウザで開いた段階で動作します。
ビデオがスマホ(iOS)で動かない問題への対策2
上記の自動再生制約から逃れるべく、クリックイベントを実装しようとあれこれ画策したのですが、すべてうまくいきませんでした。※参考
https://github.com/jeromeetienne/AR.js/issues/249
https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4
https://github.com/jeromeetienne/AR.js/issues/310内で触れられている
https://glitch.com/edit/#!/aframe-360-video-example?path=play-on-window-click.js:13:27
あたりを読んで試していました。もしこれでできた方がいらっしゃったら、どなたか教えてください
そこで救世主となったのが、以下の記事です。
https://medium.com/@sundaykuloksun/video-play-not-working-html5-autoplay-policy-beed81d64ca5
https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser
結論としては、無音動画ならば制約なしに再生できるので、"<video autoplay muted>
...</video>"というような形でコードを書きましょうということでした。
映像が表示されればとりあえずOKとしたかったので、今回はこれでOKとしました。
ブラウザからのARの読み込み激遅問題
とにかく動画のサイズを圧縮して軽くしましょう。１MBを切るくらいのサイズでないと、ユーザをイラつかせたり不安にさせたりしそうな遅さになります。まとめ
AR.jsでマーカー検知時に動画（無音）再生するには・metaタグと、webkit-playsinline と playsinlineを追記する
・mutedの制約をつける
読み込みが遅かったら
・動画を軽くする
WebARだと、どうしてもいろいろな制約がついてしまい、厳しい部分があります。
ですが、わざわざアプリを入れずとも動くという点はすごく大事だと考えているので、引き続きAR.jsを使って試行錯誤していきたいと思います。
今回の実装は、いずれ切り絵の展示会に…（お？）
お楽しみに～。
