I've got some trouble with the <video> element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.

Neither the windows version of Safari nor Chrome plays/shows that video file (maybe a Webkit issue?). This is how the HTML code looks:

<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'm also using a .htaccess file to normalize MIME types, looks like

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

Having a look into Chromes or Safaris developer tools (network tab), it looks like it chooses to play the .webm file, but it can't figure the mime type (shows undefined), plus it seems like it trys to access the files twice.

Have a look yourself:

("awesome tab")

I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the <video> tag, Chrome at least plays the audio, but still no video at all.

Reference: Site source on github

I've got some trouble with the <video> element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.

Neither the windows version of Safari nor Chrome plays/shows that video file (maybe a Webkit issue?). This is how the HTML code looks:

<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'm also using a .htaccess file to normalize MIME types, looks like

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

Having a look into Chromes or Safaris developer tools (network tab), it looks like it chooses to play the .webm file, but it can't figure the mime type (shows undefined), plus it seems like it trys to access the files twice.

Have a look yourself:

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

I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the <video> tag, Chrome at least plays the audio, but still no video at all.

Reference: Site source on github

• javascript
• jquery
• html
• webkit
• html5-video

• The video should show by clicking on the "awsomeness" tab ? – Zakaria Commented Feb 6, 2012 at 14:10
• @Zakaria: exactly. Thanks for the heads up, I've updated the question. – jAndy Commented Feb 6, 2012 at 14:11
• (FWIW, Chrome 17) Its not issuing the request twice, I'm not sure what the 1st entry in chromes dev tools is as its not shown with any request paramaters, but looking at the request in Fiddler (debugging proxy) its issued only once and responds correctly with a size+video/webm, it plays after downloading. – Alex K. Commented Feb 6, 2012 at 14:17

4 Answers 4

Here's what I did to get it to work. Since the browser accepts the first video it can play, I put the WEBM version first and Chrome has no problem with it.

Have you tried to add codecs additional info into each <source> ?
Maybe WebKit cannot automatically recognize codec used to encode the video source.

// from html5rocks., 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./en/tutorials/video/basics/#toc-markup

It works on my machine : Windows 7 Family + Chrome 16. What I did is that I opened the Developer Tools. Then, I added the autoplay="autoplay" to the video tag. Next, I edited the html source tag related to the webm format so that I could have :

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

Maybe it was simply an escape problem (with the double quotes).

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./video/chicane.mp4" type="video/mp4">
    <source src="http://www.typeofnan./video/chicane.webm" type="video/webm">
    <source src="http://www.typeofnan./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./video/chicane.mp4">MP4 format</a> | <a href="http://www.typeofnan./video/chicane.ogv">Ogg format</a> | <a href="http://www.typeofnan./video/chicane.webm">WebM format</a>
</p>

See Video for Everybody.