Videos not playing in browsers

Question

I am having 6 different types of video formats, namely .avi, .mkv, .mov, .ogv, .wmv,

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

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