HTML5 <video> tag in Chrome doesn't work

23
votes

I have noticed a strange problem with the HTML5 <video/> tag in Chrome.

Using this, it works fine:

<video poster="023.png" autoplay controls>
<source src="todojunto.mp4" type="video/mp4"  />
</video>

This only plays the sound, no video:

<video poster="023.png" autoplay >
<source src="todojunto.mp4" type="video/mp4"  />
</video>

If I remove the poster attribute, it works again.

All other browsers (even IE9...!) works perfectly, and I can't seem to find the reason.

Any ideas/help?

Thanks

5
htmlgoogle-chromevideo
Did you try with width and height ? – Denys Séguret
the same result. it doesn't work – Borja
No extension ? No error in the console ? What do you see in "Elements" regarding position and dimensions of the video object ? – Denys Séguret
No error in the console. In "Elements", "Computed Style" shows this: display: inline; height: 480px; width: 320px; I am sure that it is writed correctly because the same document works in the rest of the browsers – Borja
Same issue here ... however, on other occasions the poster attribute doesnt affect playback on chrome ... – Run CMD

5 Answers

8
votes

Video tag's attributes should be specified for strict standard implementation:

<video poster="023.png" autoplay="autoplay" controls="controls">
    <source src="todojunto.mp4" type="video/mp4"  />
</video>

If this doesn't work, there is something changed in your browser's preferences

5
votes

I'm surprised your video even shows up. Chrome stopped supporting mp4. You should use a .webm file when working with Chrome for html5 videos.

2
votes

You need to use muted=""; it does work for video

<div class="wrap">
	<video width="auto" height="400px" autoplay="" loop="" muted="">
   	   <source src="Video.mp4"  type="video/mp4">
	   <source src="Video.ogg" type="video/ogg">
	</video>
</div>
0
votes

I've encountered the same error. I fixed it by adding the preload="auto" tag.

<video autoplay loop preload="auto" poster="023.png">
    <source src="todojunto.mp4" type="video/mp4" />
</video>

Don't know if this will work for you, and it's been some time since you asked the question. But maybe this will help someone in the future!

0
votes

I just converted it to ogv and works well in all browsers. I had problem with firefox but no issues anymore. It was also showing a gray background but now, now anymore. here is my code: you can see it in eargo.com/products

<video class="" style="" autoplay loop>
            <source class="" src="video.ogv" >
            <source class="" src="video.mov" >
            <source class="" src="video.mp4" >
</video>

you may see it after 5-7-2015.