html - Safari - Videos load far too slowly

Question

I am having a bit of trouble implementing a video into my site.

I use this block of code:

<video id="video-background" poster="/video/video-poster.jpg" autoplay loop muted playsinline>
    <source src="/video/video.webm" type="video/webm">
    <source src="/video/video.mp4" type="video/mp4">
    <source src="/video/video.ogg" type="video/ogv">
</video>

When opened in any browser other than Safari the video loads instantly. I haven't seen it take longer than 5 seconds before it is playing.

When opened in Safari the video takes close to a minute to begin playing (might even be longer).

Can anyone add some reason to this madness so I can: 1) Improve performance on Safari... 2) Get a good excuse to my manager...

I have checked all the video declarations - they are all are working videos. I have tried moving the order that the videos are declared.

Thanks, Jason.

Answer 1

My assumption would be that the video has default encoding - usually with an mp4 video the final step is to write the MOOV atom that contains the metadata and information about the frame locations etc at the end. This means until the file has been completely read the browser doesn't have all the information available to it.

You can fix this using FFMPEG (open source, free, downloads available for most platforms) and doing a second pass on the video to move the MOOV atom to the front:

./ffmpeg -y -i source.mp4 -movflags faststart dest.mp4