Display Videos as UI in Studio

🧑‍💻 Technical Support
,
1

Hello 8th wall users,

I am using 8th Wall Studio and as of now, I am aware that mp4 videos can be used as video textures on 3D geometry such as a plane, but not UI textures. Because of this I attempted to utilize html and javascript to embed a video onto a div element, so that I could have overlaying UI videos on my project. I did this by creating a custom Component and creating div elements in the add() function like so:

   const overlay = document.createElement('div')
   overlay.style.position = 'absolute'
   overlay.style.top = '0'
   overlay.style.left = '0'
   overlay.style.width = '100%'
   overlay.style.height = '100%'
   overlay.style.background = 'rgba(0, 0, 0, 0.5)'
   overlay.style.display = 'flex'
   overlay.style.justifyContent = 'center'
   overlay.style.alignItems = 'center'

   const video = document.createElement('video')
   video.src = 'assets/videos/video.mp4'
   console.log(video.nodeType)
   video.setAttribute('playsinline', 'true')
   video.setAttribute('webkit-playsinline', 'true')
   video.setAttribute('muted', 'true')
   video.muted = true
   video.autoplay = true
   video.controls = true
   video.width = 320
   video.height = 240
   console.log(video.src)
   video.load()  // Ensure the source is picke up
   video.play().catch(err => console.warn('Video play error:', err))

   document.body.appendChild(overlay)
   document.body.appendChild(video)
   // const videoToPlayNow = document.getElementById('video')
 },

this returns no errors, but sometimes a warning saying the MIME type or video format are not supported. It is an mp4 that I have saved into the Studio’s assets folder. Does anyone know why this happens or have any particular workarounds?

2

Hi, welcome to the forum!

If the video is in the Assets folder you should be grabbing the URL with ecs.assets.load to ensure the asset loaded before supplying the URL to your component.

3

Hi George,

Thanks for your response.
I did try loading like this: ecs.assets.load(assets/video/video.mp4) // → Promise
but still returned an error.

Thank you for the documentation link, but are there any other examples of how this function can be used?

4

I was curious about where to find this code snippet and I realized we have our new code search feature! Check out the results:

5

Thank you! It took a bit of finagling but I made it work. For anyone else looking for something similar in studio, here it is:

  1. Upload your MP4 asset and remember the file path

  2. In your component, add in the video source as ecs.string like so:

    image

  3. On my component I have this in the add function but I am sure it will work elsewhere, essentially you want to make a div overlay and then add the video to it like so(I had to comment out playsInline):

  4.  add: (world, component) => {
    const {videoSrc} = component.schema

    const overlay = document.createElement('div')
    overlay.style.position = 'absolute'
    overlay.style.top = '0'
    overlay.style.left = '0'
    overlay.style.width = '100%'
    overlay.style.height = '100%'
    overlay.style.background = 'rgba(0, 0, 0, 0.5)'
    overlay.style.display = 'flex'
    overlay.style.justifyContent = 'center'
    overlay.style.alignItems = 'center'

    ecs.assets.load({url: videoSrc})

      .then((asset) => {
        const video = document.createElement('video')
        video.src = asset.localUrl
        console.log(videoSrc)
        console.log(asset.localUrl)
        video.crossOrigin = 'anonymous'
        video.autoplay = true
        // video.playsInline = true
        video.muted = true
        video.controls = true
        video.style.position = 'absolute'
        video.style.top = '0'
        video.style.left = '0'
        video.style.width = '100vw'
        video.style.height = '100vh'
        video.style.zIndex = '9999'
        video.style.objectFit = 'cover'

        document.body.appendChild(video)

        video.play().catch((err) => {
          console.warn('Autoplay failed:', err)
        })
      })
      .catch((error) => {
        console.error('Error loading video asset:', error)
      })

    document.body.appendChild(overlay)
    // document.body.appendchild(videoSrc)
  },