CORS headers for video content

Support
,
1

Hello,

I use https://photo-sphere-viewer-data.netlify.app to serve demo assets for https://photo-sphere-viewer.js.org (https://photo-sphere-viewer.netlify.app).

I have a _headers file with the following content

/*
  Access-Control-Allow-Origin: *

This works well for images, for example this one. However for videos (example) the CORS header is not present and I cannot make my demo to work.

Is this a config error or a known limitation ? What are my alternatives ?

Note : I use separated domains because those are separated Github repositories, in order to not bloat the main project repo, and use LFS on the assets repo.

Note 2 : the assets can be used from jsfiddle[DOT]net (main demos), localhost (dev demos), and localtunnel[DOT]me subdomains (mobile testing), hence the /* to simplify the declaration

2

Hey @mistic100

I see the Access-Control-Allow-Origin header

% curl -I https://photo-sphere-viewer-data.netlify.app/assets/equirectangular-video/Ayutthaya_HD.mp4
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
cache-control: public, max-age=0, must-revalidate
content-length: 18176445
content-type: video/mp4
date: Tue, 22 Feb 2022 20:43:01 GMT
etag: "c90f1c18df2babf128020a0b79fd75b6-ssl"
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-nf-request-id: 01FWHJRM5TDE2Q2BVR7FPNF0EM
age: 0
server: Netlify
3

@coelmay Well there is something else going on then.

  1. I don’t see the header in Firefox, but it is indeed here in Chrome

  2. The loaded video cannot be used in THREE.js (Canvas + WebGL) with a clear error : The video element contains cross-origin data, and may not be loaded.

4

Nevermind, it was a dumb typo while creating my video element

wrong : video.crossorigin = 'anonymous';
correct : video.crossOrigin = 'anonymous';

sorry

1 Like