.mp4 files not show up in the published QR code

🧑‍💻 Technical Support
, ,
1

My videos (.mp4) work perfectly on the testing QR code in dev mode, but they don’t show up in the published QR code. Anyone know the issue?
Here are all of my code:

Head.html:

----------------------------------------------------------------------
Body.html:



<img id="eggPNG" src="assets/eggNest.png" />

<video
  id="eggHatching"
  autoplay
  muted
  crossorigin="anonymous"
  loop="true"
  playsinline
  webkit-playsinline
  src="assets/jellyfish-video.mp4"></video>

<video
  id="babyBird"
  autoplay
  muted
  crossorigin="anonymous"
  loop="true"
  playsinline
  webkit-playsinline
  src="assets/Baby-Bird.mp4"></video>

<video
  id="birdVideo"
  autoplay
  muted
  crossorigin="anonymous"
  loop="true"
  playsinline
  webkit-playsinline
  src="assets/Flying-Bird.mp4"></video>


  <a-video
    id="eggVideoEntity"
    src="#eggHatching"
    width="1"
    height="1.5"
    position="0 0 0.01"
    material="shader: flat; src: #eggHatching"
    visible="false">
    <!--class="cantap"-->
  </a-video>

  <a-video
    id="babyBirdVideoEntity"
    src="#babyBird"
    width="1"
    height="1"
    position="0 0 0.01"
    material="shader: flat; src: #babyBird"
    visible="false">
    <!--class="cantap"-->
  </a-video>

  <a-video
    id="BirdVideoEntity"
    src="#birdVideo"
    width="1"
    height="1"
    position="0 0 0.01"
    material="shader: flat; src: #birdVideo"
    visible="false">
    <!--class="cantap"-->
  </a-video>
</a-entity>

-------------------------------------------------------------------------
app.js:
AFRAME.registerComponent(‘egg-hatch’, {

init() {
const egg = document.querySelector(‘#egg’)

const hatchingVideo = document.querySelector('#eggHatching')

const hatchingVideoEntity = document.querySelector('#eggVideoEntity')

const videoBabyBird = document.querySelector('#babyBird')

const BabyBirdVidEntity = document.querySelector('#babyBirdVideoEntity')

const videoBird = document.querySelector('#birdVideo')

const BirdVidEntity = document.querySelector('#BirdVideoEntity')

egg.addEventListener('click', () => {
  egg.setAttribute('visible', 'false')

  egg.parentNode.removeChild(egg)

  hatchingVideoEntity.setAttribute('visible', 'true')

  hatchingVideo.play()

  hatchingVideoEntity.classList.add('cantap')
})

hatchingVideoEntity.addEventListener('click', () => {
  hatchingVideoEntity.parentNode.removeChild(hatchingVideoEntity)

  hatchingVideoEntity.setAttribute('visible', 'false')

  hatchingVideo.pause()

  BabyBirdVidEntity.setAttribute('visible', 'true')

  videoBabyBird.play()

  BabyBirdVidEntity.classList.add('cantap')
})

BabyBirdVidEntity.addEventListener('click', () => {
  BabyBirdVidEntity.parentNode.removeChild(BabyBirdVidEntity)

  BabyBirdVidEntity.setAttribute('visible', 'false')

  videoBabyBird.pause()

  BirdVidEntity.setAttribute('visible', 'true')

  videoBird.play()

  BirdVidEntity.classList.add('cantap')
})

},

})

window.addEventListener(‘load’, () => {
const wrapper = document.querySelector(‘#eggWrapper’)

if (wrapper) {
wrapper.setAttribute(‘egg-hatch’, ‘’)
}
})

2

Hi, welcome to the forum!

Can you land your changes and share the project with the support workspace so I can take a look?

3

I just shared it with support, it says pending.
I’d really appreciate your help!

4

Accepted, taking a look now.

5

We’ve taken a look at your project and done some code cleanup on your behalf. It looks like the previous approach wasn’t fully aligned with A-Frame’s component lifecycle, which was likely causing some of the issues you were seeing.

We’ve migrated the logic into a custom A-Frame component, and everything appears to be working as expected now.

6

omg amazing thank you so much you are THE BEST! :folded_hands:
I have another issue now, I added a new image target there in the updated format, but it gives a 'Script error". Could you please check that too? I’d really appreciate it. The file is still shared with the support section.

7

hi there issue resolved.