Chrome and Safari HTML5 video rendering. Hanging on first frame.

Question

Having a real issue with displaying video in Chrome and Safari. The video seems to only run after a few page refreshes. Not sure why this is. I think it has

Answer 1

Really good answer by Offbeatmammal concerning compression. The video did need to be compressed.

I compressed with ffmpeg using the following command.

ffmpeg -i video_2.mp4 -c:a copy -c:v libx264 -preset slow -b 1.5M -movflags faststart video_2_tweak.mp4

Uploaded the video but still no luck in chrome and safari video hanging on first frame. So it was not a size issue.

Added Muted Attribute - Solution

I took the video markup and ran it outside of my site in a codepen on chrome and the issue was replicated. After looking closely at the attributes I noticed I did not have the muted="" attribute added in the video markup.

Open code pen and look at first video. No muted attribute. . Once I applied the mute attribute muted="" the video played in chrome and safari.Open code pen and look at second video. Muted attribute added .

IMPORTAINT

This is only a issue with chrome and safari. In firefox the video will play. So if you are going to add html5 video to your site make sure you include the muted="" attribute.