Safari not loading HTML5 video in Rails app

Question

I have a Rails app I'm trying to play an HTML5 video from using the following markup:

Doesn't work:

<video controls poster="http://lvh.me:3000/assets/videos/myvideo.png">
  <source src="http://lvh.me:3000/assets/images/videos/myvideo.mp4" type="video/mp4">
  <source src="http://lvh.me:3000/assets/images/videos/myvideo.webm" type="video/webm">
  <source src="http://lvh.me:3000/assets/images/videos/myvideo.ogv" type="video/ogg">
</video>

On Safari, the video says "Loading..." but never plays, although it works as expected in Chrome and Firefox. I thought it may have been the path at first, but I've tried absolute paths, relative paths, and the Rails image_path helper with no results.

To debug, I copied this example HTML5 video tag and it plays in Safari as expected (the only difference here is the source video):

Works: externally hosted sample video

<video controls poster="http://easyhtml5video.com/assets/video/Penguins_of_Madagascar.jpg">
  <source src="http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4" type="video/mp4">
  <source src="http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.webm" type="video/webm">
  <source src="http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.ogv" type="video/ogg">
</video>

However, when I take this exact same markup and host these same files locally, the video stops working in Safari:

Doesn't work: locally hosted sample video

<video controls poster="http://lvh.me:3000/assets/videos/Penguins_of_Madagascar.jpg">
  <source src="http://lvh.me:3000/assets/videos/new/Penguins_of_Madagascar.mp4" type="video/mp4">
  <source src="http://lvh.me:3000/assets/videos/new/Penguins_of_Madagascar.webm" type="video/webm">
  <source src="http://lvh.me:3000/assets/videos/new/Penguins_of_Madagascar.ogv" type="video/ogg">
</video>

Notes:

• I'm not getting errors in the Safari console or Rails log; no 404s on the files or anything.
• Locally hosted videos work in Chrome and FF, so I know the paths are correct.
• Externally hosted videos work fine in Safari.
• Locally hosted videos work in Safari outside of the Rails app—I created a static page and used all the examples above to good effect.

Based on all of this, it seems like some combination of Safari and Rails that's preventing the videos from loading.

Answer 1

I know this question is over 5 years old, but I ran into the same problem and solved it, so I'll post my solution here.

When you put video files into the asset folders, they get served in a special way. Then, byte-range requests are not served. This means Safari does not play the video as it requires byte-range requests to enable jumping around in the video and playing at different speeds.

If you put the videos into the public folder and serve them from there, it is the middleware that serves them, and in this case range requests are served. (Rails 5)

So all that should be necessary is move your videos to public. At least that fixed it for me...