HTML5 video does not autoplay on Chrome and Safari

Question

Can anyone tell me why this HTML5 video isn't working? It works fine in Firefox, but not in Safari or Chrome. Can't seem to figure out what's going on.

Here's the page I'm working on http://www.adventures.org/trips/?prg=passport&new=design .

The video is behind the big Passport logo.

Here's the video code.

 <video autoplay loop muted class="fillWidth"> <source src="http://adventures.org/trips/video/PassportHeader.mp4" type="video/mp4" /> <source src="http://adventures.org/trips/video/PassportHeader.webm" type="video/webm" /> Your browser does not support the video tag. I suggest you upgrade your browser. </video> 

Thanks for all the suggestions! I finally figured it out. The video codec was having an issue with the Facebook API located in my footer.

Answer 1

My guess is that browser is confused with two source that you set. Try this:

<video autoplay loop  muted class="fillWidth">
  <source src="http://adventures.org/trips/video/PassportHeader.mp4" type="video/mp4" />
</video>

Answer 2

Try check canuse video tag at this http://caniuse.com/#feat=video

seem there are some issues with codec in safari for webm

Will work in IE9+ and Safari/MacOSX provided the user has the WebM codecs installed. Partial support indicates that at least one codec is supported but not all.

check inside notes and key issues http://caniuse.com/#feat=webm