HTML 5 Video tag not working for any browser

Question

So I used AnyConverter do convert a .mov to .mpf, .ogv and .webm formats. I then put them in a video directory and used the following code

 <video width="500" height="281">
    <source src="/video/video.mp4" type="video/mp4" />
    <source src="/video/video.ogv" type="video/ogg" />
    <source src="/video/video.webm" type="video/webm" />
</video>

However, the video does not show in Sarari, Chrome or Firefox newest versions. I'm using the HTML 5 Doctype and not sure what is happening. Any suggestions?

EDIT

Odd, I changed the path to the full url and it still did not work. Then when I pasted the url in Firefox the video played. I wonder if its something outside of the video tag...

Answer 1

Make sure your path is correct for video files. rest of the code is fine

Add Controls Attribute on Video Tag like: Here is the full reference http://www.w3schools.com/html/html5_video.asp

<video width="500" height="281" controls>
    <source src="/video/video.mp4" type="video/mp4" />
    <source src="/video/video.ogv" type="video/ogg" />
    <source src="/video/video.webm" type="video/webm" />
</video>

Answer 2

Add controls attribute on video node

Example:

<video width="500" height="281" controls>
   ...
   ...
</video>

Answer 3

What you indicated in your edit seems to point towards a mime types issue. I have summarized some common troubleshooting steps with HTML5 video playback in this answer.

There are 3 things to check:

• make sure your video files are properly encoded for web delivery
• make sure the server where the videos are hosted is properly configured for web delivery
• make sure your others scripts on the page do not interfere with video playback

Let us know if it works.

Answer 4

 <video width="500" height="281" controls>
     <source src="/video/video.mp4" type="video/mp4" />
     <source src="/video/video.ogv" type="video/ogg" />
     <source src="/video/video.webm" type="video/webm" />
</video>

it will still render as audio because mp4 is still not fully supported.
To solve this problem, place the currently supported format at the top.
like this:

<video width="900" height="600" controls>
     <source src="/video/video.webm" type="video/webm"> 
     <source src="/video/video.ogg" type="video/ogg">
     <source src="/video/video.mp4" type="video/mp4">
</video>

Answer 5

Check if your video's file name contains any spaces in between words and either remove them or replace them with a HTML space %20:

Bad:

/video/My Video.mp4

Good:

/video/My%20Video.mp4