[SOLVED] Video textures error: "Failed to load because no supported source was found."

Hello! I’ve forked the tutorial project for video textures, but if I update the video url to something else, it doesn’t work.

For example, I’ve replaced the previous video url with: https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

Rather than working, it now shows an error in the console:

Failed to load because no supported source was found.

Here’s the project so that you can check out the error for yourself.

Theoretically, since PlayCanvas is HTTPS and the video is HTTPS, I should be able to remove the video.crossOrigin = 'anonymous'; line, but if I remove that it breaks in a different way.

Any ideas?

Edit: fixed incorrect spelling of anonymous

Is the spelling of ‘anonymous’ just wrong in the forum post or is it also spelled wrong in your HTML?

Oh, oops! Just a typo in the forum post.

1 Like

Just as some added information: I did a little testing and created a jsfiddle that uses pretty much the same basic code as the Videotexture code. Here’s the fiddle, and here’s the code you’ll find in the fiddle.

// Create HTML Video Element to play the video
var video = document.createElement('video');
video.addEventListener('canplay', function (e) {
    document.body.appendChild( video );
});

video.src = 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
video.crossOrigin = 'anonymous';
video.loop = true;
video.play();

It gets the same error as the videotexture code: Failed to load because no supported source was found.

The thing is, when I remove the video.crossOrigin = 'anonymous'; line it works great. That’s why I checked in to simply removing the crossOrigin specification in the videotexture code–but that throws a cross-origin related error every frame.

Okay, silly me. My problem was simply a CORS configuration issue after all. [facepalm]

For future readers who are unfamiliar with that, it’s configured on the server on which the video resides. This configuration worked fine for me:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://www.playcanvas.com</AllowedOrigin>
    <AllowedOrigin>http://www.playcanvas.com</AllowedOrigin>
    <AllowedOrigin>https://playcanvas.com</AllowedOrigin>
    <AllowedOrigin>http://playcanvas.com</AllowedOrigin>
    <AllowedOrigin>http://playcanv.as</AllowedOrigin>
    <AllowedOrigin>https://playcanv.as</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
1 Like