Video source options

Project: 8th Wall

I have a relatively simple AR experience based on the Magic Photos example, but I created some custom code in hopes of triggering playback from a random video hosted in a Cloudflare R2 bucket. I had some success using HLS and changing the source, but it was a little buggy, and I would prefer to have the video load into a standard video element. I was not able to get a video to play from an outside source in a video element for some reason-- is this expected?

Otherwise would it be crazy to upload a few hundred videos into my 8thwall project workspace? They are about 25MB each, which doesn’t seem too bad, but I didn’t want to do something transgressive, and managing them in my own bucket is a little easier to wrangle from the media organizing side.

Thank you!
Ariel

Hi Ariel!

It might be worth pointing out that for videos coming from outside sources, you should always set them as crossorigin anonymous. This will help the system understand that the file comes from a URL and not a pure file and therefore should be treated as such and not request any more credentials. More here:

Hope that helps :slight_smile:

1 Like

Thanks Joao, but unfortunately this does not solve the problem.

This error is originating from calling .play() on the video element. I only get this error when trying to play from a remote url-- all other videos play that are hosted in the 8thwall asset directory.

`Unhandled promise rejection: NotSupportedError: The operation is not supported.

at play [native code]

at foundTarget components.js:56:6

at dispatchEvent [native code]

at emit 8frame-1.1.0.min.js

at showImage components.js:150:19

at dispatchEvent [native code]

at emit 8frame-1.1.0.min.js

at a xr-simd-24.1.2.2165.js

at (anonymous) xr-simd-24.1.2.2165.js

at forEach [native code]

at (anonymous) xr-simd-24.1.2.2165.js

at forEach [native code]

at nA xr-simd-24.1.2.2165.js

at m xr-simd-24.1.2.2165.js

at (anonymous) xr-simd-24.1.2.2165.js

at (anonymous) xr-simd-24.1.2.2165.js

at (anonymous) xr-simd-24.1.2.2165.js

at (anonymous) xr-simd-24.1.2.2165.js

at IA xr-simd-24.1.2.2165.js

at tick xr-simd-24.1.2.2165.js

at tick 8frame-1.1.0.min.js

at render 8frame-1.1.0.min.js

at (anonymous) 8frame-1.1.0.min.js

at u 8frame-1.1.0.min.js

at t 8frame-1.1.0.min.js`

Do the videos have sound? Usually we see that error when you try to play a video with sound programmatically, as that’s not allowed on iOS and some other browsers.

It ended up being a CORS issue with my bucket. @Mal_Duffin helped me figure that out!

3 Likes

Glad to hear it! Thanks for sharing your solution!

1 Like

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.