HTML5 Video (both webm and MP4) are showing a blank white screen and aren't playing

Question

I've done an hour of googling but I either suck at it, or it isn't a common issue.

Here's my video tag:

<video class="video-background" preload="none" loop="loop" autoplay="autoplay">
    <source src="/resource/video/ripples.webm" type="video/mp4">
    <source src="/resource/video/ripples.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

No matter what order I place them in, neither the webm nor the mp4 will load, they just show a blank white screen. I'm also not getting a 404 from the server so the videos should be coming down from the server?

Appreciate any input

EDIT: We removed the preload="none" attribute and now the first frame of the video shows up, but it doesn't auto-play the rest of the video for some reason (despite having autoplay="autoplay" on the element.

Crusted

The markup seems to be correct. If I test it in chrome with webm jsfiddle.net/35cRY . My quess something wrong with your video. How did you convert it? I have good experience with: online-convert.com – Illogic

Thanks! I'll try that site. Will update on success/failure :) – Crusted

Didn't work - same result. – Crusted

can you provide an url? – Illogic

Answer 1

Add a muted attribute. (Chrome. Possibly some anti-ad policy.)

(Also make sure you didn't nest <video> in <video>, which has similar outcome. But I bet on the first cause.)

Procopius

Thanks, had this same issue and adding muted worked for me. Oddest thing, the video would play in the preview in our CMS, but not on the live site. – Randarandal

Answer 2

I ran into a very similar issue where the solution ended up being the fact that I was providing a string with "px" when it expected a number for width and height. Took me FOREVER to catch the mistake and just showed a blank screen.

// BLANK WHITE SCREEN + HAIR PULLING
<video width="200px" height="300px" controls>
   <source...

---

// WORKING VIDEO PLAYER
<video width="200" height="300" controls>
   <source...

Hope this helps others.

Sotelo