I am using HTML5 to embed a video on my site. It works in all browsers except Edge.
Here is my code:
<video id="sampleMovie" width="509" height="280" preload autoplay>
<source src="breaking_news.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="breaking_news.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="breaking_news.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value='config={"clip":{"url":"breaking_news.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>
I removed the full URL for the purpose of posting here.
Any idea on why it will not play in Edge?
Based on the Edge browser video developer guide for mp4, this is what is supported:
Media File : Video MP4.
Extension setting :.mp4
.
Mime type setting :video/mp4
.
Based on the code you provided, the MP4 file you are providing has an extension type/container type of .mov
which is not supported.
Thus, I recommend re-encoding your source video file so that it has the .mp4
extension type, more than likely this is the issue. I would also look at the specific codec type you are specifying.
Lastly, I recommend looking at their full dev guide found here:
https://learn.microsoft.com/en-us/microsoft-edge/dev-guide/html5/video
Hope this helps.