Html5 video does not support all browsers

Question

HTML 5 videos that run on Chrome, Mozilla, and Android devices but don’t work on Safari and IE.

One video format that plays on all devices and platforms? specify the appropriate code or links

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png"> <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4"> <source src="//cdn.foo.com/bar-video.webm" type="video/webm"> </video> 

Answer 1

At the moment, unfortunately, there is not a single format that will be played in all browsers.

If you want to get a good idea of ​​the current situation, then the table on the page by this link is usually relevant (including the link, not copying the table, because the information changes so much):

• https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Typically, MP4 is the most supported container format, but even here you can have multiple codecs with multiple profiles, etc.

There is a resource that generates sample HTML5 code to support as many browsers as possible (usually called Video for Everybody). I'm not sure how often it is updated:

• http://v4e.thewikies.com

Here is an example for HTML5 playback only (no Flash backup, but you can add this if you want):

 <!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody --> <video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" /> </video> <p> <strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a> </p> 

You will see that for maximum support, especially for older browsers, you really need your video in several different formats.

However, for most people, using MP4 as a container and H.264 as a codec will reach most of your users.

Answer 2

What is your version of IE and Safari?

Please try adding a message to the video tag and see if you see:

  <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> 

Answer 3

Given that all browsers can be excessive, since then you will also consider much older browsers and browsers that are not up to standard.

If you want the client browser to be able to play your video, follow these steps:

• implement the modernizer https://modernizr.com/
• use "fallback" for older browsers, such as <object> or <embed> tags

If the above does not work for you, try recoding your video file, as it can be encoded with a less popular container; at least make sure the video encoding format matches the file extension. Also make sure your video image and audio resolution are not too high.