Why does my Safari can't play WebM Videos???! 😭

October 7, 2024 (1mo ago)

Once upon a time...

I was working on my Graduation Project, and I was always wantd to build a professinal website for something real that is not my hallucination 😅. and when talk about the high quality and modern website, It's all about speed. so yes, I finally have some place to use this trash format that lot of program didn't suuport 🥳

The problem 👹

I was so happy to build everything, and seeing the preview on my Windows being perfectly fine, but when I tried to use my iPhone to see it. something was wrong, the video didn't play. I was like "Huh?"

huh-cat-gif

I tried to search for the issue, and I found that Safari doesn't support WebM videos. I was like "Huh??" again. I was so mad, I was like "Why Apple? Why you do this to me? 😭" but then I realize I do use some webm in this website! (haha come check out the main page :p okuso.uk)

The solution 🤓

I was so wondering why it's not working, but anyway the first thought it's added a fallback in my next.js code to use mp4 instead. here is the code look like.

  const [videoSrc, setVideoSrc] = useState("./intro.mp4"); // Default to mp4
 
  useEffect(() => {
    const videoElement = document.createElement("video");
    if (videoElement.canPlayType('video/webm; codecs="vp8, vorbis"').length > 0) {
      setVideoSrc("./intro.webm");
    }
  }, []);

and I glimpse to my mp4 file size...... mp4-file-size

hell nah... brotha 😭 I'm out.

i'm-out-gif

It's so f**king damn big 😭😭😭 so i had to fix the webm issue. then i realize that after i added the fallback code. the safari is still showing the webm. That's the place I find the probelm!.

Since the safari can passed the vp8 encoded check. is that because mine webm is vp9 encoded? 🤔 this is the place the "handbrake" come in. I use the handbrake to re-encode the webm to vp8. and it's working! 🥳 handbrake

The end 🎉

So that's the tale of me battling Safari's WebM issues and emerging victorious. Here's a quick recap of what I learned:

I hope this story can help you if you face the same issue. If you have any questions or run into similar problems, feel free to reach out! Remember, when it comes to web development, it's not just about making things work – it's about making them work everywhere. Happy coding! 💻✨