HTML5 Video with Safari

I worked with HTML5 video today. Though it was not continuous, I have been working with HTML5 video tag all the way back to 2010. In the heyday, I customized the skin and added more functions to one of the most popular HTML5 video player, videojs for Adonit. I thought I knew HTML5 video, its pros and cons. While the advantages of using the video tag haven't changed much through the years, I probably never fully understand how twisted it is.

I was working with this piece of HTML earlier today, which at the first look, was quite normal.

There was a problem with the video though. It was playing on Chrome and Firefox but not on Safari. That was a little surprise as work on Chrome usually means work on Safari and other webkit-based browsers. Soon after the surprise, an intuitive unpleasant feeling took over my mind. "What the **** went wrong with the encoding again?" was my first thought. But as both Chrome and Firefox were working, it meant my ogg and mp4 sources were fine (and actually after days of bloody testing, I was pretty sure that I got my encoding options for ffmpeg right).

The error might be another wicked behavior of Safari. But that was actually a sad news. First, Safari doesn't have many great developer tools, except the webkit's inspector. Second, when you get your encoding wrong, the video simply refuses to play. No error message is thrown. After exploring a fair amount of ffmpeg options, I never excluded the possibility that Safari requires a different encoding than Chrome.


I thought I was screwed, but wait, Adonit video has always been working, on all kind of browsers. Looking at the old code, besides the hooks for videojs, the only difference I could spot out was


The source tags had the type attribute there, my new one didn't. I was a bit skeptical about that hypothesis due to the fact that type had been quite a useless attribute to me. You are not going to find any type in my script tag, because it is purely useless. And in fact, Chrome and Firefox did not complain about that at all. Anyway, I opened the network tab in the inspector to confirm the hypothesis. Surprisingly, Safari was downloading the .ogg video, not .mp4 as expected! Excited with this behavior of Safari, I extended my experiment by switching the position of source tags.


Hooray, the video was playing! My guess was right, when no type is specified, Safari will grab the first source it finds. Reversed the source tabs to the original position, added the type attribute and the myth of Safari video was solved.

When I was young and naive, I believed HTML5 video is definitely the future of video. I still believe though, just that I also have learned that HTML5 still has a long way to go. Anyway, THAT small discovery made my day.