Article

  • 8 years

    8 years

    YetiShare / Core

    4598

Subtitles Not Working on JWPlayer - CORS Issue

Problem

Subtitles are not working within JWPlayer in a multiple server storage setup.

Fix

If you 'inspect' your site within Chrome or Firebug, then reload the video player page you should see an error similar to:

XMLHttpRequest cannot load http://fs1.yoursite.com/363dd9137575fc64/video.srt?download_token=07e8c538e27824b770fb702fb4e5a19617ece9e62fa863d3c035f5ebd062eb66. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yoursite.com' is therefore not allowed access.

This is a CORS issue. By default browsers will block requests being sent to other domains & sub-domains.

You can allow for it within Nginx by editing your Nginx config file. Add this to your Nginx config file, the restart Nginx:

#
# Wide-open CORS config for nginx
#
location /files/ {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        #
        # Om nom nom cookies
        #
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}