Videos not playing in browsers

3
votes

I am having 6 different types of video formats, namely .avi, .mkv, .mov, .ogv, .wmv, .mp4. I tried to embed these videos to the browsers using video tag in HTML5. But no videos played in any browsers. In Firefox it shows "no video with supported mime type". In Chrome only .mp4 video is playing rest of the videos are not playing. In IE8 it shows nothing. Here is my HTML code:

<video width="300" height="200" controls>
    <source src="videos/airhorse_avi.avi" type="video/avi" title="Avi Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_mkv.mkv" type="video/mkv" title="Mkv Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_mov.mov" type="video/mov" title="Mov Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_ogv.ogv" type="video/ogv" title="Ogv Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/airhorse_wmv.wmv" type="video/wmv" title="Wmv Videos">
</video>
<video width="300" height="200" controls>
    <source src="videos/spielberg_mp4.mp4" type="video/mp4" title="Mp4 Videos">
</video>

Is that possible of playing all these videos in any browsers like firefox, chrome, IE, safari, opera.

4
htmlvideohtml5-videomime-types
Aren't MP4, webm and ogg the only supported formats? Also I know for a fact that Firefox does not support mp4. – Tchoupi
That's not the correct MIME type for .wmv files. It should be video/x-ms-wmv – mbomb007

4 Answers

3
votes

The simple answer is that for various reasons not all browsers support all the available codecs/containers.

There is a fairly up-to-date list here http://en.wikipedia.org/wiki/HTML5_video and this answer shows how you can test specific support yourself Mobile detection for specific parts of websites

You mention (in one of the comments) that you get an error thrown ... if you let us know what error that is (if the canPlayType() doesn't answer the question) then we could research some more

0
votes

Look, I've done some tests (I had time to test only AVI & MP4 formats), and for some reason, on Google Chrome, only the mp4 format is working by far.

Another thing, it is very unnecessary to write the code as you did, try to do it like that (it worked fine for me as I said.):

<video width="300" height="200" controls>
<source src="video/movie.mp4" type="video/mp4">
<source src="videos/movie.mp4" type="video/avi">
Your browser does not support the video tag.
</video>
0
votes

This should be enough to play video in all browser (video support in browsers):

<video width="300" height="200" controls> 
    <source src="videos/airhorse_ogv.ogv" type='video/ogg; codecs="theora, vorbis"'/> 
    <source src="videos/spielberg_mp4.mp4" type='video/mp4'/> 
    <p> Video is not visible, most likely your browser does not support HTML5 video </p> 
</video>

and if you add this line it would be great:

<source src="videos/spielberg_webm.webm" type='video/webm' />
0
votes

To cover most situations convert each video to an Ogg, Webm and MP4 version, display it on a web page using:

<video width="300" height="200" controls preload="none">
    <source src="video/myvideo.ogv" type="video/ogg">
    <source src="video/myvideo.webm" type="video/webm">
    <source src="video/myvideo.mp4" type="video/mp4">
</video>

For IE8 and earlier use flash (see http://videojs.com)

For IE9 the preload tag must be present and set to auto or none.