AR空間に動画を追加！AndroidとiOSでの再生方法を詳細解説【A-Frame、AR.js、Glitch】

こんにちは。
NoelRecordsのプログラミング研究室、のえ研へようこそ。

少し前にAR名刺を簡単に作る方法を解説しました。
そのときはAR空間上に画像ファイルを表示させました。

そこで今回はその続きということで、AR空間上に動画ファイルを配置・タップで再生されるようにしようと思います。
プログラムは前回のコードを元に変更・修正していきます。

動画ファイルをWebアプリ上に表示・再生させるプログラムをAndroidデバイス向けに作るのは簡単なのですが、iPhoneやiPadにも対応させようとすると一手間必要です。
これはブラウザであるSafariでの動画再生に制限があるためです。
そのためAndroidやデスクトップでは埋め込んだ動画を再生できるのに、iPhoneとiPadでは動画を再生できないといったことが起きてしまいます。
そこでこの動画では、まずはAndroidでAR空間上に配置した動画ファイルを再生できるようにしてから、iOSに対応させるという順で解説していこうと思います。
途中からJavaScriptでのコーディングも出てきますが、それほど難しいことはしないので頑張っていきましょう。