CODEWITHSUNDEEP
javascripthtmlvideo
lakshmi prasanna
lakshmi prasanna

Reputation: 41

html5 video not supporting all browsers

HTML 5 videos working in chrome , Mozilla, and android devices, but not working in safari and IE.

One video format that plays on all devices and platforms? please provide related 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>

Upvotes: 4

Views: 3261

Answers (3)

S&#233;bastien Demoustiez
S&#233;bastien Demoustiez

Reputation: 1426

What's your IE and Safari version ?

Please try to add a message in the video tag and look if you see it:

 <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>

Upvotes: 0

Mick
Mick

Reputation: 25511

There is unfortunately not a single format at this time that will play on all browsers.

If you want to get a good feel for the current situation then the table in the page at this link is generally up to date (including the link rather than copying the table as the information changes so much):

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

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

Here is an example for HTML5 playback only (no flash fallback, but you can add that if you wanted):

<!-- "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 actually need your video in multiple different formats.

For most people, however, using MP4 as the container and H.264 as the codec will reach the majority of your users.

Upvotes: 2

user4244405
user4244405

Reputation:

Considering all browsers may be a over-kill as you would then also consider much older browsers and browsers that are not standards compliant.

If you want to make sure the client's browser can play your video, here's a couple of things you can do:

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

If the above did not work for you, try re-encoding your video file as it may be encoded with a less popular container; at least make sure that the video encoding format matches the file-extension. Also make sure your video's picture and audio resolution is not too high.

Upvotes: 0

Related Questions