HTML5 Video Tag Not Displayed In Compatible Browser

Question

I have a page hosted on my computer with Apache through XAMPP. I am using the HTML5 video tag to insert a video into the page as follows:

<video id="video1" width="480">
    <source src="ad1.mp4" type="video/mp4">
    Your browser doesn't support the video tag
</video>

However, when the page loads, it doesn't load the video. It also does not display the line showing lack of compatibility.

I checked the mime-types file to make sure video/mp4 was indeed in there, and it was. I also created a .htaccess file and used AddType to add in the file extensions, but to no avail.

I am able to get a different mp4 (of larger filesize) to play and display properly even though both are in the same directory. I don't have any JS code affecting the load of the video and the name of the file that should be playing is indeed "ad1.mp4".

The list of files in the htdocs folder are as follows:

video.html   (the page displaying the video)
ad1.mp4      (The video in question)
content.mp4  (The video that plays properly)

If any more information is needed, don't hesitate to ask!

Any help is appreciated! Thank you very much!

Answer 1

I'd recommend you to read http://goo.gl/4NwNP7 and use flash as fallback option always.

You can't achieve 100% cross-browser solution with only using HTML5 video tag.

Also in your case, one of solutions is https://stackoverflow.com/a/9349984/800639