Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video not loading in Chrome. Potentially due to CORS issue. #1031

Closed
case-dubs opened this issue Sep 25, 2020 · 3 comments
Closed

Video not loading in Chrome. Potentially due to CORS issue. #1031

case-dubs opened this issue Sep 25, 2020 · 3 comments

Comments

@case-dubs
Copy link

@case-dubs case-dubs commented Sep 25, 2020

@cookpete I've hit a wall in trying to play .m3u8 videos on Chrome and would appreciate any insights you might have to resolve the issue.

Right now, when users try to view ReactPlayer .m3u8 videos in Chrome (either from localhost or from our qa server), the video does not load. On Safari, the browser console shows CORS errors, but the video still seems to load.

The videos are hosted on s3, and I believe we've removed all privacy permissions related to the videos.

Here is an example video: https://videokits-apps.s3-us-west-1.amazonaws.com/riza/usrYteLEMKdz5Lt8RgTCmMa/Video/fiAo7WNGVzDwH7fcyGnLbe2MSWZ1vxMAa.mov/HLS/fiAo7WNGVzDwH7fcyGnLbe2MSWZ1vxMAa.m3u8

The video plays fine here: https://hls-js.netlify.app/demo/

Here are the console errors when attempting to render the video in Chrome:

Access to XMLHttpRequest at '....m3u8' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr-loader.js:82 GET ... net::ERR_FAILED

Access to XMLHttpRequest at '...' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

logger.js:40 [error] > 0 while loading ...

Thank you so much in advance for your help!!

@itaylorm
Copy link

@itaylorm itaylorm commented Oct 13, 2020

You can temporarily fix the CORS issue by running chrome this way. Localhost is deliberately blocked

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

@case-dubs
Copy link
Author

@case-dubs case-dubs commented Oct 13, 2020

Thanks so much for your reply @itaylorm. I'm also running into this issue when I run the code on our dev server, even though I've followed steps to enable CORS and view permissions on our Amazon s3 bucket. Have you had any experience with this and/or do you have any recommendations on how you might approach fixing this issue?

@cookpete
Copy link
Owner

@cookpete cookpete commented Nov 14, 2020

Your example URL works for me from localhost:3000. I assume you got CORS set up correctly on the server side 👍

@cookpete cookpete closed this Nov 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.