360 video not playing on aframe

Question

I was trying to play my own 360 video mp4 file offline with sphere code in a-frame, but it's not working, does anyone know why? Here's my code

 <a-assets>
        <!--
        SOURCE
        Author: Bitmovin
        URL:    https://bitmovin.com/demos/vr-360
        -->
        <video id="sky"
               loop
               muted
               crossorigin="anonymous"
               playsinline webkit-playsinline
               src="test.mp4">
        </video>
        
        <video id="video"
               loop
               crossorigin="anonymous"
               src="https://video.360cities.net/aeropicture/01944711_VIDEO_0520_1_H264-1024x512.mp4">
        </video>
        
        <img
          id="city-thumb"
          crossorigin="anonymous"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg"
        />
        
        <img
          id="cubes-thumb"
          crossorigin="anonymous"
          src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg"
        />
        
      </a-assets>
      
      
      
      <a-videosphere
        id="#video-360"
        rotation="0 0 0" src="#video"
        animation__fade="property: components.material.material.color; type: color; from: #000; to: #000; dur: 300; startEvents: fade"
        animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade"
        play-on-click>
      </a-videosphere>

I tried upload the video to https://pulltestninja.b-cdn.net/test.mp4 via bunny.net Video CDN, but it doesn't work either