9

I am trying to display HTML5 video in my Rails 3 app in development,i am using Sqlite3 and default webserver(Webrick).I put the video file (movie.ogg) under assets (assets/movie.ogg).The video window screen shows up but there is no video on there though.I have 3 questions...Since rails app assets doesn't have sub-folder for video(as the way it has images),where do you put video files? Does Webrick support Html5 video?Here is my code below ,what am i missing here,to make the video work?

view

       <video width="320" height="240" controls="controls">
       <source src="/assets/movie.mp4" type="video/mp4" />
       <source src="/assets/movie.ogg" type="video/ogg" />
       <source src="/assets/movie.webm" type="video/webm" />
         Your browser does not support the video tag.
       </video>

config/initializers/mime_types.rb

  Rack::Mime::MIME_TYPES.merge!({
  ".ogg"     => "application/ogg",
  ".ogx"     => "application/ogg",
  ".ogv"     => "video/ogg",
  ".oga"     => "audio/ogg",
  ".mp4"     => "video/mp4",
  ".m4v"     => "video/mp4",
  ".mp3"     => "audio/mpeg",
  ".m4a"     => "audio/mpeg"
})

4 Answers 4

10

The video_tag helper builds an HTML 5 <video> tag.

By default, files are loaded from public/videos. To load from assets/video add the following line to your config/application.rb file:

config.assets.paths << "#{Rails.root}/app/assets/videos"

Tag Usage:

<%= video_tag (["movie.mp4", "movie.ogg", "movie.webm"] :size => "320x240", :controls => true, :autobuffer => true) %>
1
  • I have a model called Video which is something the user creates but I also need to be able to have videos that I embed on the site. When I create this configuration and then use the video_tag the app goes through the video_controller which causes it to look for an object in the Video class with the id = "movie" or whatever is the name of the video file. Any idea how to work around this?
    – wuliwong
    May 11, 2012 at 18:53
4

The assets pipeline is used for static assets. If you're adding video files to your app often, you should put them somewhere else (for example, public/videos or public/system/videos). If they really are static assets, try restarting your server first.

2

Assuming your html is correct, unless things have dramatically changed in rails 3.1 with the asset pipeline anything contained in the public folder can be served up from the web server, so the exact location of where to store videos is up to you. According to your sources above you should put your videos in public/assets then confirm the videos are being served up by accessing http://localhost:3000/assets/movie.mp4 (or any other src url for a video).

2
  • Thanks.But in Public folder there is no assets sub-folder though?
    – katie
    Jan 13, 2012 at 21:44
  • You need to create a new folder named assets in public. Rails doesn't come with defaults other than images, javascripts and stylesheets.
    – nbrew
    Jan 13, 2012 at 22:08
0

To serve videos as static assets in Rails 4, the best way is to use the video tag:

Simply create a folder in 'assets' called 'videos' and store your videos there:

app/assets/videos/mycoolvideo.mp4

Then in your views:

<%= video_tag "mycoolvideo.mp4" %>

If you need to specify size, a poster image or add controls, add (but this is HTML, not Rails):

<%= video_tag "mycoolvideo.mp4", width: "640", height: "480", poster: "mycoolvideo.jpg", controls: true %>

Note that Rails cleverly knows that the image is in the image folder, so specifying a name is enough, without adding images/ or assets/images/ before the image name.

If you want to pass in many videos (or better said, the same video in different formats), pass an array:

<%= video_tag ["mycoolvideo.mp4", "mycoolvideo.ogg", "mycoolvideo.webm"], size: "620x480", controls: true %>

Note that for sizing you can either use size: "widthxheight" ("640x360") or separately height: and width:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.