Q&A
前提・実現したいこと
ar.jsを使ったARでマーカーにカメラを翳したらYoutubeの動画を再生させたい。
html5のvideoタグで自分のサーバーにアップした動画を再生させる事はできたのですが、
Youtubeの埋め込みでやってみると一応16:9の画面は出るのですが動画が再生されません。
Youtubeは再生できないのでしょうか？
該当のソースコード
<html> <head> <meta charset="utf-8"> <!-- A-Frame ライブラリの読み込み --> <script src="aframe-master.min.js"></script> <!-- AR.js ライブラリの読み込み --> <script src="aframe-ar.js"></script> </head> <body style='margin:0px; overflow:hidden;'> <a-assets> <iframe id="ar-video" width="560" height="315" src="https://www.youtube.com/embed/4nVBG2CyYUQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </a-assets> <!-- デバッグ用の画面表示、VR用のボタンをそれぞれ非表示に --> <a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false"> <!-- 今回作成した『.patt』ファイルを読み込む --> <a-marker type='pattern' url='pattern-machu-100.patt'> <a-video src="#ar-video" width="2.6" height="1.4" 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(); }); </script> </body> </html>
試したこと
<video autoplay loop="true" muted="true" src="https://www.youtube.com/embed/4nVBG2CyYUQ"></video>
上記のようにvideoタグにYoutubeのアドレスを入れてみましたが、黒い画面になって再生されませんでした。
あなたの回答
tips
プレビュー
