Render 4k resolution 360 video on web application issue with Max texture on mobile

Question

I'm developing a web application with React and A-Frame. I having an issue with videosphere and texture size of my 360 video.

The scene is very simple, I want render a 360 video on videosphere so the user can see all around the environment.

I hosted my video on Firebase, linked on my web app and all works fine when I use video of 1920x1080 resolution, but 360 video in that resolution are not very beautiful are little blurry so I want try to render a 4k video just for testing.

The issue in this case is that: the console show me this warning "WebGL: INVALID_VALUE: texImage2D: width or height out of range" on device (on desktop works) I checked the max texture on my device with chrome dev tools and I see my device have 4096 of max texture size and my video are: 3840x2160

How can I fix this issue? That are some walkaround to can display a 4k 360 video on my webapp? HSL can be a solution?

This is the only component I render on the page where I have the issue:

const XIV_360_Abbazia_San_Silvestro_4K = () => {
  const assetsRef = useRef(null);
  const videoRef = useRef(null);
  const sceneRef = useRef(null);

  return (
    <a-scene className="ar-container fullHeight" ref={sceneRef}>
      <a-assets ref={assetsRef} timeout="1000000">
        <video
          id="video360"
          src="https://firebasestorage.googleapis.com/v0/b/nonantola-sottosopra.appspot.com/o/XIV_360_Abbazia_San_Silvestro_4K.mp4?alt=media&token=52db7d73-3f56-4b52-b9c5-8993e8315f40&_gl=1*1shr1sm*_ga*NzM4MjQ0ODY0LjE2OTgwNDcxMjQ.*_ga_CW55HF8NVT*MTY5ODA0NzEyNC4xLjEuMTY5ODA1MzAwMy42MC4wLjA."
          ref={videoRef}
          type="video/mp4"
          crossOrigin="anonymous"
          loop
          muted
          onLoadedMetadata={() => {
            console.log('ON LOADED META DATA');
          }}
          onCanPlayThrough={() => {
            console.log('CAN PLAY THROUGH');
            let videoSphere = document.createElement('a-videosphere');
            videoSphere.setAttribute('src', '#video360');
            sceneRef.current.appendChild(videoSphere);
          }}
          onProgress={() => console.log('Loading progress...')}
          onError={(e) => {
            console.log('Video error:', e.target.error.code);
            // Optionally log the full error object for more details
            console.log('Full error object:', e.target.error);
          }}
          onWaiting={() => console.log('Waiting for video to load or play...')}
          onPlay={() => console.log('Video started playing.')}
          onPause={() => console.log('Video paused.')}
        />
      </a-assets>
      <a-entity camera fov="50" position rotation look-controls></a-entity>
      <button
        className="absolute w-20 h-20 bottom-0 left-0 z-50"
        onClick={() => {
          videoRef.current.play();
        }}
      >
        PLAY
      </button>
    </a-scene>
  );
};

export default XIV_360_Abbazia_San_Silvestro_4K;

Answer 1

UPDATE: I solve the issue about the size of the texture. I notice my original video have an aspect ratio of 2:1 and when I encode it the result video try to match the height so the width become > 4096 and my device can't support it.