html - 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 something to do with the way Chrome and Safari render video.

In Firefox I have no issues with the video running. Here is the HTML

<video width="100%" height="100%" preload="auto" loop autoplay style="visibility: visible; width: 
 1321px; height: 744px; opacity: 1;">
  <source src="https://d- 
  360.nyc3.digitaloceanspaces.com/2018/06/video_2.mp4" type="video/mp4"> 
</video>

Answer 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