文章/答案/技术大牛

发布

问设置视频播放器的大小
EN

Stack Overflow用户

提问于 2017-11-13 18:49:08

回答 1查看 1.7K关注 0票数 1

我使用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-场景标记和视频标记设置高度和宽度，但这不起作用，就好像设置没有效果一样。

然后我开始对代码进行黑客攻击，并设置画布的高度和宽度。

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，但改变线段的高度和线宽，这没有任何影响。

如有任何建议，将不胜感激。我不知道我是否应该调整相机，视频圈还是场景，用画布改变高度和宽度就像黑客一样。提前感谢

发布编辑：

视频播放器的底座在镜头右侧。我通过转动相机rotation="0 90 0“来固定它。
试图设置纵横比与线段-高度=9段-宽度=16绝对是错误的，因为它偏斜的视频(即。直线看上去是曲折的)

javascript

html5-video

aframe

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-27 18:19:11

当我“嵌入”场景并通过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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47271460

复制

相似问题

问设置视频播放器的大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置视频播放器的大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置视频播放器的大小
EN