How do you configure S3 and Cloud Front to stream HTML5 video? Tried everything
I've tried many, many different configurations, files, encoding, browsers, etc..., but this is the simplest example that demonstrates the problem I am having.
If you paste the url for the sample video for JSPlayer in FF 8.0.1, the video plays inline:
http://video-js.zencoder.com/oceans-clip.webm
If I take that same video and upload it to my s3 bucket, it triggers download instead:
https://s3.amazonaws.com/turingvideos/oceans-clip.webm -- or -- http
(Permissions are read for everyone on the file and bucket)
So, let's try Cloud Front.
d2yat6m71lu23b dot cloudfront dot net slash oceans-clip.webm (download trigger)
And Cloud Front streaming:
strzsu4h2ax96 dot cloudfront dot net slash oceans-clip.webm (infinite spinner)
The same basic things happen when using an html video tag as well. Works fine from zencoder, borked on anything other than local disk read.
So, what magic is zencoder managing that is completely out of my reach with S3/CloudFront? I'm completely stumped.
Edit:
Setting the content type and disposition to "video/webm" and "inline" did the trick. Thanks for the quick response guys.
Answer
Using the S3 web management console (https://console.aws.amazon.com/s3), select your bucket, right-click one of your video files, switch to the metadata tab and set 2 headers:
- Content-Type: whatever your video file's content type is
- Content-Disposition: inline
Also, make sure your CloudFront distribution is set as a "streaming" distribution and not a "download" one.
Edit:
From the AWS docs:
CloudFront servers don't determine the MIME type for the objects they serve. Therefore, when you upload an object to your origin, you should set the object's Content-Type header.
Source: http://docs.amazonwebservices.com/AmazonCloudFront/latest/DeveloperGuide/ObjectMIMEType.html