0

I'm working with a landing page that uses cdn plyr 

<script src="https://cdn.plyr.io/3.3.10/plyr.js"></script> 
    <script>const player = new Plyr('#player');</script>

I moved a video from local files to a server and changed the src="to new address form server", but the video stopped working and I'm getting this error:

page.html:1 Failed to load https://www.video.mp4: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://111.0.0.0:12121' is therefore not allowed access.

I tired different things, and even added another videos from other servers and it worked. except my video. The only thing that work is to add crossOrigin="anonymous" to the video tag and install Chrome extension But this wont work for other users, I need something permanent.

I also looked in to many answers:

How does Access-Control-Allow-Origin header work?

Videos not playing due to no Access Control Allow Origin

HTML5 video doesn't play with crossOrigin=“anonymous”

Please any ideas how to make this work?

Adam
  • 1,385
  • 1
  • 10
  • 23

2 Answers2

0

This is a problem caused when you try to send request from a server that is different from the server you send request to. As in the comment was indicated, only the server you have uploaded your video to can control the header. But if it's your own server you can easily manipulate the code to allow request from different servers.

Aliakbar sultani
  • 40
  • 1
  • 8
  • It is my server, but can I do anything in the html file? or how would do it from the server side? note that I don't have a backend experience. – Adam Jun 15 '18 at 21:29
  • @Adam I've posted a reference with instructions for various servers as a separate answer. – Stand__Sure Jun 15 '18 at 21:58
0

Try this for a reference on how to enable on your server W3C CORS Enabled

Stand__Sure
  • 253
  • 1
  • 13