HTML5 and Chrome / Webkit Video

Question

I have some problems with the <video> element that I assume. I have a small demo page where I launch a video. This file is available in .webm , .mp4 and .ogv . Video plays correctly in Firefox (10) mac + win, Safari mac, Chrome mac.

Neither the Safari browser version nor Chrome play / show this video file (maybe Webkit problem?). Here's what the HTML looks like:

 <video controls> <source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/> <source src="video/chicane.mp4" type="video/mp4"/> <source src="video/chicane.ogv" type="video/ogv"/> </video> 

I also use the .htaccess file to normalize MIME types, looks like

 # Video AddType video/ogg ogv AddType video/mp4 mp4 m4v AddType video/webm webm 

Having looked at the Chromes or Safaris developer tools (tab on the network), it looks like he wants to play the .webm file, but he can’t display the mime type (shows undefined), plus it seems like trying to access the files twice.

See for yourself:

http://www.typeofnan.com ("awesome tab")

I have no clue why it works fine on OSX with both browsers, if someone can detect a bug on the site, please let me know. Currently, I have discovered some functions and used Javascript for .play() video. However, if I use the autoplay attribute in the <video> , Chrome at least plays audio, but still no video.

Link: Source site on github

Answer 1

Have you tried to add codecs additional information to each <source> ?
WebKit may not be able to automatically recognize the codec used to encode the video source.

 // from html5rocks.com, see link on the bottom of answer <video> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> </video> 

http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup

Answer 2

Here is what I did to make it work. Since the browser accepts the first video that it can play, I first put the WEBM version, and Chrome has no problems with it.

Answer 3

It works on my machine: Windows 7 Family + Chrome 16. I did what I opened developer tools. Then I added the autoplay="autoplay" tag to the video tag. Then I edited the html source tag associated with the webm format webm that I can:

 <source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\""> 

Perhaps this was just an escape problem (with double quotes).

Answer 4

I wrote this markup from scratch using your video urls and it seems to work fine:

 <video controls width="360" height="360"> <source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4"> <source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm"> <source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg"> <span title="No video playback capabilities, please download the video below">Your video</span> </video> <p> <strong>Download video:</strong> <a href="http://www.typeofnan.com/video/chicane.mp4">MP4 format</a> | <a href="http://www.typeofnan.com/video/chicane.ogv">Ogg format</a> | <a href="http://www.typeofnan.com/video/chicane.webm">WebM format</a> </p> 

Watch the video for everyone .