Search code examples
htmlamazon-web-servicesvideoamazon-s3amazon-cloudfront

HTML5 - Amazon S3 with Cloudfront

I have a video uploaded to an Amazon S3 server and I am using Amazon cloudfront to host it at http://d1cjzj1b4csf2b.cloudfront.net/test.mp4. I want to play the video using the HTML5 tags and the video player. When I host the test.mp4 file locally and use the HTML code below, it works in my browser. However, it doesn't work when I use Amazon Cloudfront. I tried using Cloudfront with both HLS and RTMP streaming (and JWPlayer), and neither of those worked either because Amazon's documentation was pretty poor. Any suggestions for how to host my video and embed it in a page? I would prefer something simple, but I can obviously try to use a player like JWPlayer. Thanks in advance.

<video controls>
  <source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Solution

  • The code provided works in Chrome Win10. Your MP4 is downloading if the url is added to browser's address bar so most likely the file's content-type is either not in the header or it has the default value of application/octet.

    1. Download a free copy of CloudBerry Explorer Amazon S3 or use the console

    2. After installation or sign on, locate your MP4 and check the content-type and make sure it's video/mp4.

      • Look for an option that allows you to edit HTTP Headers with CloudBerry.
      • Look for Metadata options in S3 console.
      • Both can be accessed by right-clicking the file and opening preferences.

    3. If you setup your CF Distribution to use HTTPS protocol, then add the s to your url's http

    <video controls>
  <source src="http://d1cjzj1b4csf2b.cloudfront.net/test.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>