Not able to show video with html5

Question

I am testing html 5 video tag.

I am using http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library and http://camendesign.co.uk/.

I downloaded the creative common video.

When I use an external link, it plays the video. So I uploaded the video to my server but it does not play. It asks if I want to save it or asking an application to play.

When I go to the external link, http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv, it plays it on the browser automatically.

I also tested locally, but it does not play either.

I am hoping someone gives me why and how to solve the problem.

This code works.

<figure>
<video id="vid1" width="500" height="300" style="position:absolute"
 poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
 durationHint="33"
 controls = "true">
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv" /> 
<source src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v"/&gt;

</video>
    </figure>

This does not.

<figure>
<video id="vid1" width="500" height="300" style="position:absolute"
poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
durationHint="33"
controls = "true">
<source src="http://www.mywebsite.com/media/bbb400p.ogv" /> 
<source src="http://www.mywebsite.com/media/bbb_trailer_iphone.m4v"/&gt;

</video>
</figure>

This does not work either.

<figure>
<video id="vid1" width="500" height="300" style="position:absolute"
 poster="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb480.jpg"
 durationHint="33"
 controls = "true">
<source src="http://127.0.0.1/html5videotest/media/bbb400p.ogv" /> 
<source src="http://127.0.0.1/html5videotest/media/bbb_trailer_iphone.m4v"/&gt;

</video>
    </figure>

Answer 1

Maybe a long shot but have you tried adding:

AddType video/ogg .ogv
AddType video/mp4 .mp4

to your .htaccess file?

Also, here is a nice article with more tips to get you going: http://camendesign.com/

Answer 2

Two main comments here...

1) What's with the <figure> tag? As far as I know, the video tag doesn't need it at all to work.
2) It's probably not required, but I still think it's better to add the meta types to your source tags:

<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />

3) If your browser asks you to download the files you're most likely got a problem in your web server configuration. Specifically, check that your server sends the correct mime types for your video files (.ogv, .mp4, .m4v etc extensions).

Ok, not two, I guess there were three there ^_^

Answer 3

Check out Mark Pilgrims "Dive into HTML5." There is a great chapter on HTML5 video that should answer your question.

http://diveintohtml5.org/video.html