javascript - 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-scene 标签和视频标签设置高度和宽度，但这不起作用，就好像该设置没有效果一样。

然后我开始修改代码并设置 Canvas 的高度和宽度

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，但更改了线段高度和线段宽度，但没有效果。

如有任何建议，我们将不胜感激。我不知道是否应该调整相机、视频圈或场景，并且使用 Canvas 更改高度和宽度感觉就像黑客。提前致谢

帖子编辑:

1. 关于视频播放器平移到素材的右侧。我通过旋转相机rotation="0 90 0"来修复它
2. 尝试使用segments-height=9segments-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>