Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Set Origin header

Hi,

I am trying to capture the video frames from JWPLayer using HTML5 canvas and the 'toDataURL' javascript function.

It fails because the asset is not considered safe as not loaded using CORS.
In fact JWPlayer doesn't send the Origin header thus the server doesn't return the 'Access-Control-Allow-Origin' header in response.

My MP4 video is hosted on AWS S3, and S3 requires the request to contain this Origin header in order to return the Access-Control-Allow-Origin header. See: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors-troubleshooting.html
(point 2,a)

How can I make JWPlayer send this header when requesting the file? Using the HTML5 Video tag directly it looks like I can use the crossDomain attribute but I can't see anything similar with JWPlayer.

Please advise

Thank you

3 Community Answers

Up Down

mathew.a.corley

User  
1 rated :

+1 bump This has been an issue for me as well.

Up Down

Cooper Reid

JW Player Support Agent  
0 rated :

Hi,
I’m afraid there is no way to set the origin header for requests made by our player. Have you tried using this method to grab screenshots of the video? http://stackoverflow.com/questions/13760805/how-to-take-a-snapshot-of-html5-javascript-based-video-player. You can use jwplayer().getContainer().querySelector(‘video’) to return the video tag used by our player.
-Cooper

Up Down

max

User  
2 rated :

Hey fellas,

This problem caused our team several hours' grief as well but I've found a solution that seems to work for our setup (which is similar to executive's above with S3-backed video hosting)... It's actually quite easy once you know how to do it, but I didn't come across this info in the docs:

When you declare the placeholder element for your video player in the HTML (the ID of which you pass to jwplayer("placeholder-id") ), embed a child HTML5 video tag inside with the attribute crossorigin="use-credentials", like so:

<div id="player">
<video crossorigin="use-credentials"></video>
</div>

I figured this out by inspecting the code here:
https://github.com/jwplayer/jwplayer/blob/3c3cf9d1d346a3ef177e4553cdfffbe8593562e2/src/js/providers/html5.js#L146

That code is essentially saying "create a new video tag if we don't already have one". If you supply one ahead of time, then you can slip whatever attributes you need in and they'll continue to be there after jwplayer does its whole initialization.

One caveat (I believe...) is that the video tag must be rendered in your web app's response HTML during initial page load. My understanding is that you can't create it on the front-end (e.g. with JS templates) due to particulars of the CORS specification... I haven't tested this personally though. YMMV with different browsers too.

This technique allowed me to move past the tainted canvas exception in Chrome at least.

I hope this saves somebody else out there some time!

Matt
www.crater.co

This question has received the maximum number of answers.