Playlist Crossdomain issues

jstobbe — Jun 20, 2014 11:20AM EDT

I am embedding an .rss playlist, and getting success while playing on a desktop, but not on iOS devices.

(a) All videos are hosted on an amazon s3 bucket
(b) rss playlist is hosted on same bucket
(c) I use a custom skin (the "five" skin, without playlist thumbnails, which is hosted by me)

Scenario 1: http://goo.gl/3t8ZSI - When I host (1) the jwplayer.js file (2) rss playlist, and (3) the custom skin all on the same domain, there is no problem. All seems to work very well. The embed works on both desktop and iOS (mobile) devices

Scenario 2: http://goo.gl/8Abw79 - When I host (1) the jwplayer.js file on the domain (2) the rss playlist on the external amazon s3 bucket, and (3) the custom skin on the same domain as the player - there is a slight problem. The embed works on desktop, BUT NOT on mobile devices.

I have crossdomain.xml files in the root of both the domain, and the s3 bucket.

So, this would seem to be a crossdomain issue, but I can't seem to figure out where/why?

Thanks

14 Community Answers

jherrieven

Best Answer

Jun 20, 2014 11:47AM EDT

On iOS your player will be rendered using HTML5 mode not Flash.

Given the RSS file is on a different domain, you need to ensure the CORS header on the file you are requesting is allowed to be accessed from the origin domain - this is not the same as having a crossdomain.xml.

Read more here: http://support.jwplayer.com/customer/portal/articles/1403679-crossdomain-file-loading

You'll need to check with your RSS host about how to do this. You might also want to ensure the mime-type for the file is "text/plain" rather than "application/octet-stream"

James Herrieven

View in conversation

Up Down

jherrieven

Best Answer User

Jun 20, 2014 11:47AM EDT 1 rated :

Up Down

Ethan Feldman

JW Player Support Agent

Jun 20, 2014 11:50AM EDT 1 rated :

Some more reference – http://enable-cors.org/

Up Down

jstobbe

User

Jun 20, 2014 12:28PM EDT 0 rated :

Thanks both of you, but what's not clear is if I put the CORS header

Access-Control-Allow-Origin: *

in the .php script (in this case, the joomla template) or in the header of the .rss playlist?

If it is put in the rss playlist, what is the syntax for this?

If it's put on the site hosting the embed (a .php joomla site), then I follow this - http://enable-cors.org/server_php.html ?

Sorry to ask such silly q's, but before I go breaking a bunch of code, I prefer to be clear.

J

Up Down

jherrieven

User

Jun 20, 2014 12:36PM EDT 0 rated :

It's for the .rss playlist - which may be out of your control depending on how this is being generated.

If you are generating it dynamically using php you can include the same header - otherwise you'll need to speak with your host to get it enabled for the file.

James

Up Down

jstobbe

User

Jun 20, 2014 01:13PM EDT 0 rated :

I generate the playlist on my own, based on files in my s3 bucket.

I also control where the rss is hosted, so I can edit as I wish.

Here's an example of my playlist (or here: http://goo.gl/VDAooD )

********************************

<rss xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats" version="2.0">

<channel>

<title>playlist title</title>

<item>
<title>TITLE</title>
<description>DESCRIPTION</description>
<jwplayer:source file="rtmpt://stream" />
<jwplayer:source file="http://file"/>
<jwplayer:image>http://image</jwplayer:image>
</item>

</channel>
</rss>

*************************

Based on this, I put the header before <channel> ?

Up Down

Ethan Feldman

JW Player Support Agent

Jun 20, 2014 01:26PM EDT 1 rated :

This playlist doesn’t have any actual files though, just placeholders.

Up Down

jstobbe

User

Jun 20, 2014 01:59PM EDT 0 rated :

Sorry, Ethan.

Here's a working playlist - http://goo.gl/8GLCLQ

Up Down

Ethan Feldman

JW Player Support Agent

Jun 20, 2014 02:47PM EDT 0 rated :

I tried to test this locally, but I get this error in Firebug:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://econtext.net/playlists/2014/006/230L14-CAL_EnvironmentalLawAndRegulation/001.rss. This can be fixed by moving the resource to the same domain or enabling CORS.

Up Down

jstobbe

User

Jun 20, 2014 03:09PM EDT 0 rated :

Ok, so what I would like to do in a perfect world:

1. jwplayer.js on domain
2. skin on domain
3. rss playlist on s3 bucket (same location as video files)

And have it such that the playlist is playable on both desktop and mobile (html5) devices.

So, if I enable CORS, this should do it.

Do I put the CORS header

Access-Control-Allow-Origin: *

in the playlist? or the embed code? or the php file of the website where the embed code is hosted?

Up Down

Ethan Feldman

JW Player Support Agent

Jun 20, 2014 03:16PM EDT 0 rated :

It is set on your server – http://enable-cors.org/server_apache.html, this is for apache, for example.

Up Down

jherrieven

User

Jun 20, 2014 03:52PM EDT 0 rated :

@jstobbe

There are two approaches you could take given your scenario.

Both require you to be able to modify your ".htaccess" file so if you are unsure about this or need help - ask your hosting provider.

Option 1 is to include a directive that will enable the CORS header for all files matching a specific pattern:

========================================

<FilesMatch "\.(rss|vtt)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

========================================

This matches any RSS or VTT files, for example, and includes the header as part of the response. This is probably your simplest route for serving static files. You can make the "FilesMatch" filter more specific if you wish to in order to have greater security / control.

Option 2 is an alternative if you want include the header on dynamically generated RSS files, or want to control inclusion of the header on a file by file basis without re-visiting the ".htaccess" file each time.

Ths involves a couple of steps:

Firstly create your RSS file with the PHP header setting at the top:

========================================

<?php
header("Access-Control-Allow-Origin:*");
header("Content-type:text/plain");
?>
<rss xmlns:media="http://search.yahoo.com/mrss/" xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats" version="2.0">

<channel>

<title>...</title>

<item>
...
</item>
</channel>
</rss>

========================================

Next you need to tell the server to process this file via PHP.

This is done by incuding the AddHandler directive to your ".htaccess" file:

========================================

AddHandler x-mapp-php6 .rss

========================================

You can provide a specific file filter for added control if needed as follows:

========================================

<Files yourpage.rss>
AddHandler x-mapp-php6 .rss
</Files>

========================================

Using this approach you can include additional PHP scripting in the RSS file - so it can be built dynamically using scripting logic, a 3rd party data source, etc. Bear in mind anything in your RSS file that starts with <? will now be executed as PHP, so if it's in your file for some other reason (an XML tag for example) you will need to echo these lines to prevent errors.

For example:
========================================

<?php echo '<?xml version="1.0" encoding="IUTF-8"?>'; ?>

========================================

I hope that helps.

James

(PS: just to be clear, the "========================================"s are not to be included in the files - they are just to distinguish between code & comments!)

Up Down

Ethan Feldman

JW Player Support Agent

Jun 20, 2014 04:05PM EDT 0 rated :

Thanks James, this is very helpful.

Up Down

jstobbe

User

Jun 21, 2014 03:39PM EDT 0 rated :

James for the WIN!

I don't have access to the .htaccess file until Monday, so I tried option 2, including

*****************************

<?php
header("Access-Control-Allow-Origin:*");
header("Content-type:text/plain");
?>

******************************

at the top of my .rss playlist, and there are now NO crossdomain issues on either desktop or html mode.

Thanks SO much!!!

Up Down

Ethan Feldman

JW Player Support Agent

Jun 22, 2014 09:24PM EDT 0 rated :

Sweet :)

This question has received the maximum number of answers.