Aframe 设置视频播放器大小答案

【问题标题】：Aframe set the video player sizeAframe 设置视频播放器大小
【发布时间】：2018-04-26 13:20:54
【问题描述】：

我使用 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 标签和 video 标签来设置 height 和 width，但这不起作用，好像设置没有效果一样。

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

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

任何建议将不胜感激。我不知道我是否应该调整相机、视频球或场景并使用 a-canvas 更改高度和宽度感觉就像是 hack。提前致谢

后编辑：

关于视频播放器平移到素材右侧。我通过旋转相机来修复它 rotation="0 90 0"
尝试使用segments-height=9segments-width=16 设置纵横比肯定是错误的，因为它会扭曲视频（即直线看起来是曲折的）

【问题讨论】：

标签： javascript html5-video aframe

【解决方案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>

【讨论】：