Why Your Video Plays in Safari but Not Chrome: The Codec Problem Explained

When Video Plays In Safari But Not Chrome

Today, while working on a project, I ran into a strange issue: the video I added played perfectly in Safari, but refused to load in Chrome. At first, I couldn’t figure out why, and it turned into a classic case of a video codec problem.

So in this post, I’ll share what I learned: what a codec actually is, why Safari can play certain videos while Chrome can’t, and how you can avoid this issue in your own projects. That way, if you ever face the same problem, you’ll know exactly where to look.

What’s a Codec?

A codec is basically a way of compressing and decompressing video or audio so that browsers and devices can play them. Think of it like a “language” your video speaks.

The problem is, not all browsers speak the same language.

• Safari supports some codecs that Chrome doesn’t.
• Chrome supports some that Safari doesn’t.

So if your video is encoded with a codec Chrome doesn’t understand, it just won’t play. That’s exactly what happened in my case.

The Fix: Re-encoding with FFmpeg

The solution turned out to be simple: re-encode the video into a format that both Safari and Chrome support. The safest option is to use:

• H.264 for video (libx264 in FFmpeg)
• AAC for audio

Here’s the command I used:

ffmpeg -i original-video.mp4 -c:v libx264 -c:a aac -strict experimental output.mp4

What this does:

• i original-video.mp4 → input file
• c:v libx264 → use H.264 codec for video
• c:a aac → use AAC codec for audio
• strict experimental → allows AAC encoding (sometimes needed)
• output.mp4 → the new, browser-friendly video file

Once I ran this, the new output.mp4 worked in both Safari and Chrome. Problem solved.

Why Safari Worked but Chrome Didn’t

Safari is a bit more flexible with some codecs (like H.265 / HEVC), while Chrome is stricter and doesn’t support them out of the box. That’s why Safari could play my original file, but Chrome couldn’t.

By converting the video to the widely supported H.264 + AAC combination, I made it compatible everywhere.

In short: Safari supports H.265 (HEVC) — but Chrome does not (unless hardware-accelerated decoding is available, and even then it’s spotty and OS-specific).

Takeaway

If you ever run into a situation where your video plays in one browser but not another, chances are it’s a codec issue. Just re-encode your video using FFmpeg with libx264 and aac, and you’ll be safe.

For more insightful tutorials, visit our Tech Blogs and explore the latest in Laravel, AI, and Vue.js development.