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

html html5-video mp4 webm
user3541693 picture user3541693 · Jun 26, 2014 · Viewed 10.6k times · Source

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.

Answer

Fanky picture Fanky · Feb 27, 2019

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

Related questions

Can I have a video with transparent background using HTML5 video tag?

We filmed a spokesperson on a green screen and have the video files ready in multiple formats. With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the …

Read More
Playing MP4 files in Firefox using HTML5 video

I have searched around quite a bit but have not solved my problem. I have a video tag running as follows: <video class="ne" src="{{ page | video_url }}" muted="true" volume="0" controls width="720" height="480" poster="{{ page | video_poster_image_…

Read More
How to embed .h264 video file in html webpage using video tags

I am trying to play .h264 file in browser, Trying to accomplish this using html video tags. The result is always an empty frame. I did check some links on web, They recommend to play the video in .mp4 container. …

Read More