Chrome And Safari Html5 Video Rendering. Hanging On First Frame.

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 something to do with th

Solution 1:

I noticed that it was pretty slow to download, so my guess will be that it's a server performance/caching issue.

You can address some of that by using something like ffmpeg re-encoding with the MOOV atom at the front of the video (will allow it to start playing back sooner) eg:

ffmpeg -i video_2.mp4 -c:a copy -c:v copy -movflags faststart video_2_tweak.mp4

if performance is still poor, then you might want to constrain the bitrate further to help address download speed (current video is around 2.5Mbps) eg:

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

(this forces a transcode of the video using a high quality present but constrains bitrate to 1.5Mbps ... you may need to experiment with this value to get a good quality vs performance trade-off)

Depending on the desired output side, if you don't need the full 720p framesize, you can add an additional constrain on the transcode to limit that eg:

ffmpeg -i video_2.mp4 -s 640x360 -c:a copy -c:v libx264 -preset slow -b 1M -movflags faststart video_2_tweak.mp4

You should also ensure that your server is configured to allow caching of content so if the video is being replayed it doesn't always have to come back to your server

Solution 2:

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 . <video width="100%" height="100%" preload="auto" loop="" autoplay="" muted="".

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.