Decoder error not supported error when render 360 video on web application

Question

I'm developing a simple scene with A-Frame and React.JS where there is a videosphere that will create and render when video are fully loaded and ready to play.

My goal is to render 4k (to device who can reproduce it) video on videosphere to show at the users the environment. On desktop versions all works fine also with 4K videos while on mobile works only for 1920x1080.

I already check if my phone can render a 4k texture video and it can render untill 4096, I checked also that video.videoWidth are 4096.

The error I have is with decoder

MediaError {code: 4, message: 'DECODER_ERROR_NOT_SUPPORTED: video decoder initialization failed'}

This error will show only on mobile, I can see it through Chrome Developer tools, I already try to re-encode both with Handbrake and ffmpeg but always the same error will appear on mobile.

My video is hosted on Firebase and have this resolution 4096x2048 I'm testing on Google Pixel 7 already checked if WEBGL can render 4k texture on it

I can't understand why decoder works fine on Desktop and not on mobile only with 4k video and with 1920x1080 it works

This is the only component rendered on page

import React, { useEffect, useRef } from 'react';

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/optimized_output.mp4?alt=media&token=b865c840-f81e-4b6c-b2cd-1eac01b81a53&_gl=1*d8g7wq*_ga*NzM4MjQ0ODY0LjE2OTgwNDcxMjQ.*_ga_CW55HF8NVT*MTY5ODA2NDI2Ni4zLjEuMTY5ODA2NjI5NC42MC4wLjA."
          ref={videoRef}
          type="video/mp4"
          crossOrigin="anonymous"
          loop
          muted
          onCanPlayThrough={() => {
            console.log('CAN PLAY THROUGH');
            let videoSphere = document.createElement('a-videosphere');
            videoSphere.setAttribute('src', '#video360');
            sceneRef.current.appendChild(videoSphere);
          }}
        />
      </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;