1
votes

I'm having problems with delivering static HTML5 video files via Amazon S3 + Cloudfront. Basically, the videos play fine, but completely ignore any loop functionality within the video player. I've got the player element loop attribute set to true. And also am also setting in the Javascript as a backup. (See below). This all works fine using localhost, but when I'm serving from AWS, I keep getting the error net::ERR_CONTENT_DECODING_FAILED

I'm using both .webm and .mp4, and files have the appropriate headers in AWS. Content-Type video/webm and Content-Type video/mp4 respectively.

I noticed gzip was set on all videos by default once on S3. When removing the gzip header, videos no longer even play. So I'm stuck with either no video, or unresponsive video with decode errors.

Any ideas?

if (typeof player.loop === 'boolean'){
    player.loop = true;
  }

  else{
    player.addEventListener('ended', function(){
      this.currentTime = 0;
      this.play();
    }, false);
  }
1

1 Answers

6
votes

I had exactly same problem, and the solution was quite simple. In my case, I've simply removed the gzip task for video assets deployment to S3/Cloudfront and it solved the problem.

In fact the problem is related to the resource header Accept-Encoding and the response header Content-Encoding, as you can find more details on the documentation below:

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html#CompressedS3

I would recommend to open the video in a separate tab, and inspect the headers mentioned above, it will be easy to see what's wrong.