Elixir & Phoenix, mp4 and the Safari

Learn how to serve mp4 files to the Safari browser.

With Welect we have a client where we heavily rely on Elixir and Phoenix. Welect is a service you can use to access premium content by paying with your attention by watching ads you choose by yourself. Usually these ads are  HTML5 videos encoded in the mp4 format, but for some reason Safari rejected to play them. From the web inspector we just got a unexpressive “Failed to Load Resource” error. Diggin’ down the rabit hole we found out that the Safari browser is using http range requests to play mp4 video.

Range against the machine

It seems that Cowboy (the http server for Erlang) doesn’t support http ranges very well - there is an open issue for that on GitHub. There is even an issue on elixir-lang addressing this issue. Luckily Morgan Segalis has published an Elixir Plug on hex. The usage is fairly easy: Just add the hex to your deps and call the Plugin - and there important before Plug.Static:

elixirdefmodule YourApp.Endpoint do
  use Phoenix.Enpoint, otp_app: :your_app

  plug PlugRange

  plug Plug.Static,
  at: "/", from: :my_project, gzip: false,
  only: ~w(css fonts images js favicon.ico robots.txt video.mp4)

  # ...

  plug YourApp.Router
end

Now the video can be served properly - even to Safari. No magic - but a blogpost like this could have saved us a few hours of googling. It’s funny to see that every new web framework starts with the same little woes since I had similar problems with Rails almost eight years ago.

If you like what you are reading, you should follow us on Twitter - and if you have an interesting Elixir and Phoenix project you want to get goin’ then drop us a line.