Aframeで動画プレーヤーのサイズを設定します

Question

私はaframe.ioライブラリを使用して360動画を再生しています。ビデオプレーヤーのアスペクト比、高さ、幅を設定できません。

<a-scene id="scene" class="fullscreen" vr-mode-ui="enabled: false"> 
 
     <a-entity id="vr-camera" camera look-controls="reverseMouseDrag: true" wasd-controls-enabled="true"></a-entity> 
 
     <a-assets> 
 
     <video id="aframeVideo" crossorigin="anonymous" ></video> 
 
     </a-assets> 
 
     <a-videosphere src="#aframeVideo" rotation="0 180 0" segments-height=9 segments-width=16></a-videosphere> 
 
    </a-scene>

私はA-シーンタグとvideoタグを経由して高さと幅を設定しようとしましたが、設定は効果がありませんかのように、それは動作しません。

は、その後、私はコードをハッキング開始し、キャンバス

onResize() { 
 
     console.log('window resize'); 
 
     
 
     const vrCanvas = document.getElementsByClassName('a-canvas')[0]; 
 
     if (typeof vrCanvas !== 'undefined') { 
 
      const vrContainerHeight = document.getElementById('vr-container').offsetHeight; 
 
      const vrContainerWidth = document.getElementById('vr-container').offsetWidth; 
 
      if (typeof vrContainerWidth !== 'undefined' && typeof vrContainerHeight !== 'undefined') { 
 
      vrCanvas.style.height = vrContainerHeight + "px"; 
 
      vrCanvas.style.width = vrContainerWidth + "px"; 
 
      } 
 
     }

の高さと幅を設定するが、それは私の映像と右側に遊びパンの初期位置を歪め私のビデオの。だから私は、アスペクト比を19：6に設定しようとしましたが、効果のないセグメント高さとセグメント幅を変更しました。

任意の提案をいただければ幸いです。私は、カメラやビデオシーン、シーンを調整して、キャンバスを使って高さや幅を変えるべきかどうかは分かりません。事前に感謝

POSTのEDIT：

1. 映像の右側にビデオプレーヤーパンについて。カメラ回転= "0 90 0"
2. segment-height = 9 segment-width = 16でアスペクト比を設定しようとすると、映像が歪んでしまいます（つまり、直線がジグザグに見える）

Answer 1

シーンを「埋め込み」、シーンのJavaScriptを使用して幅と高さを設定すると、ビデオプレーヤーのサイズとコントロールのアスペクト比を設定できます。

onResize() { 
 
     const aframebox = document.getElementsByClassName('aframebox')[0]; 
 
     if (typeof aframebox !== 'undefined') { 
 
      aframebox.style.height = myHeight; 
 
      aframebox.style.width = myWidth; 
 
     } 
 
     },

<a-scene class="aframebox" embedded class="fullscreen" vr-mode-ui="enabled: false"> 
 
     <a-entity id="vr-camera" camera look-controls="reverseMouseDrag: true" wasd-controls-enabled="true"></a-entity> 
 
     <a-assets> 
 
     <video id="aframeVideo" crossorigin="anonymous" ></video> 
 
     </a-assets> 
 
     <a-videosphere src="#aframeVideo" rotation="0 180 0"></a-videosphere> 
 
    </a-scene>