Failed to show video using html5
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 have uploaded a public video.
When I use the external link, it plays the video. So I uploaded the video to my server but it won't play. He asks if I want to save it or ask the app to play.
When I go to the external link, http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb400p.ogv , it automatically plays it in the browser.
I also tested locally but it doesn't play either.
I hope someone can tell me why and how to fix 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"/>
</video>
</figure>
This is not true.
<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"/>
</video>
</figure>
This doesn't 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"/>
</video>
</figure>
a source to share
Long shot maybe, but have you tried adding:
AddType video/ogg .ogv
AddType video/mp4 .mp4
to your .htaccess file?
Also, here's a good article with more detailed tips: http://camendesign.com/
a source to share
Two main comments here ...
1) What's with the <figure> tag? As far as I know, the video tag is not needed at all for work.
2) This is probably not required, but I still find it better to add meta types to your original tags:
<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
3) If your browser asks you to download files, you most likely have a problem configuring your web server. In particular, make sure your server is sending the correct mime types for your video files (extensions .ogv, .mp4, .m4v, etc.).
Ok, not two, I think there were three: ^ ^ ^
a source to share
Check out Mark Pilgrims Immerse yourself in HTML5 . There is a great chapter on HTML5 video that should answer your question.
a source to share