A-Frame videosphereでの動画再生について

Question

A-Frame1.2.0を使用して、VR動画を再生するページを構築したく考えております。
下記の記述で動画の再生は可能になったのですが、画質が悪く原因がわからない状態です。
再生している動画は1080pのパノラマ映像となっており、容量としては50MBほどです。
実際に再生してみると体感240p程度の画質になってしまいます。

動画の読み込みと同時に再生しているがために画質が劣化しているからなのでしょうか。
解決法・対応方法をご教授ください。

<!--VRエリア-->
  <a-scene id="scene" vr-mode-ui="enabled: true">
    <a-entity cursor="rayOrigin: mouse"></a-entity>
    <!--VR動画-->
    <a-assets>
      <video id="video" src="[動画パス（mp4)]" preload="auto" loop="false" webkit-playsinline playsinline />
    </a-assets>
    <a-videosphere src="#video"></a-videosphere>

    <!--再生・停止ボタン-->
    <a-image click-play raycaster="objects: .clickable" id="play" src="./assets/play.png" rotation="0 0 0" position="2 1 -5" ></a-image>
    <a-image click-pause raycaster="objects: .clickable" id="pause" src="./assets/pause.png" rotation="0 0 0" position="0 1 -5" ></a-image>

  </a-scene>

//ページ読み込み時
document.addEventListener("DOMContentLoaded", function (event) {
    var video = document.getElementById("video");
    console.log('loaded');
    //video.play();
})

//再生ボタン
AFRAME.registerComponent('click-play', {
    init: function () {
        this.el.addEventListener('click', function (event) {
            console.log('click-play');
            var video = document.getElementById("video");
            video.play();
        });
    }
});

//停止ボタン
AFRAME.registerComponent('click-pause', {
    init: function () {
        this.el.addEventListener('click', function (event) {
            console.log('click-pause');
            var video = document.getElementById("video");
            video.pause();
        });
    }
});