A-Frame and add video dynamicaly

Question

I have

<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
 ...
  <a-assets>
     <video id="losevideo" autoplay loop="true" src="images/losevideo_oA.mp4" crossorigin="anonymous" playsinline webkit-playsinline></video>
  </a-assets>
 ...
<a-video id="alosevid3" webkit-playsinline playsinline autoplay loop="true" src="#losevideo" position="-5 0 -5" rotation="0 0 0" scale="0.01 0.01 0.01"></a-video>

and inside a component i have

    let videoEl = document.createElement('a-video');
    videoEl.setAttribute('id', 'loseVidEl'); // Create a unique id for asset
    videoEl.setAttribute('src', '#losevideo');
    videoEl.setAttribute('height', '4.9');
    videoEl.setAttribute('width', '4');
    videoEl.setAttribute('position', '0 0.001 -5');
    videoEl.setAttribute('rotation', '-90 0 0');
    scene.appendChild(videoEl);

This video is played as intended. (and alosevid3 is not visible because it is to small)

If i try

<a-video id="alosevid3" webkit-playsinline playsinline autoplay loop="true" src="#losevideo" position="-5 0 -5" rotation="0 0 0" visible="false"></a-video>

(visible=false) i get a black screen for loseVidEl. (Like i do without a-video) Can someone explain this behaviour to me?

Addition - this is behaviour in Firefox. In Oculus Browser and Chrome (MacOS) video screen is black. (Video is played when directly loaded)

score 0 · Answer 1 · answered Feb 13 '20 at 13:38

this seems to be an issue of the (unreliable) asset management system of a-frame (maybe underlying three.js cache). Similar problem: https://github.com/aframevr/aframe/issues/4080

Now i am loading videos directly videoEl.setAttribute('src', 'images/winvideo_oA.mp4');

for my case this is sufficient.

A-Frame and add video dynamicaly

1 Answers1