11

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.

user3541693
  • 135
  • 1
  • 1
  • 6

2 Answers2

4

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.)

Fanky
  • 1,673
  • 1
  • 18
  • 20
  • 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. – Fireflight Oct 17 '19 at 21:32
0

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.

isaacdre
  • 842
  • 7
  • 10