HTML5 video tags not showing amazon videos

Question

I want to view video on amazon cloudFront but it is not shown

<video id="video1" controls width="270" autoplay>
<source src="http://d191za0n1uuhbv.cloudfront.net/2/testing - 14.mp4" type="video/mp4">
</video>

I have changed the Content-Type and Content-Disposition as per the thread How do you configure S3 and Cloud Front to stream HTML5 video? Tried everything but still no luck

I also made the video public but also it didn't work

I also tried puting it this way but did not work either

<video id="video1" controls width="270" autoplay>
<source src="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4"  type="video/mp4">
</video>

Am I missing anything?

Answer 1

The code you posted works perfectly. Are you sure the browser supports the video tag? Check http://caniuse.com/#search=video

You should always aim to support most browser and unfortunately HTML5 is not well supported yet. You can provide fallback solutions inside the video tag.

I.e.

<video id="video1" controls width="270" autoplay>
 <source src="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
 <object type="application/x-shockwave-flash" 
   data="player.swf?file="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
    <param name="movie" value="player.swf?file="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">
    <a href="http://vidorabia.s3.amazonaws.com/2/testing%20-%2014.mp4">Download the video </a>
 </object>
</video>

Basically HTML5 capable browser will use the native video. Other browser will try to use the plugin. If it doesn't work either you can provide a download link.