Why isn't my video playing?

Questions
1

Hey guys, I’m trying to make a plane with a video playing on it as some kind of dance floor:

I have a video element set like this:

    <video
      id="video"
      loop
      autoplay
      muted
      style="display:none;"
      src="https://cdn.glitch.com/f702252a-b636-466f-bffb-ccb9405c2c77%2F4k_6.mp4"
    ></video>

Then I load it like this:

      const video = document.getElementById("video");
      video.setAttribute("crossorigin", "anonymous");
      video.play();

However, the plane is just a big piece of black cutting my cube in the corner, and doesn’t have a video playing. I’ve already tried loading the video separately with video.src="https://cdn.glitch.com/f702252a-b636-466f-bffb-ccb9405c2c77%2F4k_6.mp4".

I need the cross-origin thing because if you remove it, you get an error that THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded.at Object.texImage2D

Any ideas how I change this? If you load the site at https://threejs-lets-go.glitch.me and delete the canvas and display the video, you’ll see that the video playing. Thanks in advance for helping!

2

This URL doesn’t load for me. I’m not familiar with how assets work in glitch, are you supposed to reference it as src="/assets/4k_6.mp4"? Although that doesn’t work either :thinking:

1 Like
3

It’s quite odd, you have to upload your videos to the “assets” part, and then click on it, copy the link, and src it in your website.

Are you sure about that? This is what I see:

Screen Shot 2021-08-18 at 9.06.28 PM
Screen Shot 2021-08-18 at 9.06.28 PM2836×1978 192 KB

You can tell by the progress bar that there’s a video, and when I clicked play something happened.

4

2021-08-19 15_58_24-Server Not Found — Mozilla Firefox (Private Browsing)
2021-08-19 15_58_24-Server Not Found — Mozilla Firefox (Private Browsing)1378×794 21.4 KB

1 Like
5

Odd - I asked the Glitch community about this error. If my source is randomly nonexistent that might cause the video not to play… but the video is playing anyway if I remove the threejs canvas. Any other ideas what’s not causing this to play?

Oh also some extra information: if video.setAttribute("crossorigin", "anonymous"); or crossorigin="anonymous" aren’t in the code, then the console will throw errors. But my video is still failing to play!!

I SOLVED IT!! The solution was that my light was shining black lol. I was changing the color of my light, and it turns out you can only see things with a white colored light… duh.

1 Like
6

I checked that you had a light but I didn’t look at the color :sweat_smile:

1 Like
7

Thanks to your post I was able to fix my video playback lol
The documentation is pretty hard for me as a novice and i am just copy pasting code from everywhere :slight_smile: