9

我想在我的Rails顯示HTML5視頻的開發應用3,我使用SQLITE3和默認的Web服務器(使用WEBrick)。我把視頻文件(movie.ogg)下資產(資產/ movie.ogg)。視頻窗口屏幕顯示,但沒有視頻那裏雖然。我有3個問題...由於Rails應用程序資產沒有視頻的子文件夾(就像它的方式圖像),你在哪裏放視頻文件? Webrick是否支持Html5視頻?下面是我的代碼,下面我缺少什麼東西來使視頻工作?HTML5視頻不是我的工作軌道3應用

視圖

 <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> 

配置/初始化/ 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" 
}) 

回答

10

的video_tag幫助建立一個HTML 5 <video>標籤。

默認情況下,文件從公共/視頻加載。從資產/視頻加載以下行添加到你的config/application.rb中的文件:

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

標記用法:

<%= video_tag (["movie.mp4", "movie.ogg", "movie.webm"] :size => "320x240", :controls => true, :autobuffer => true) %> 
+0

我有一個叫做視頻的模型,這是用戶創建的東西,但我也需要能夠擁有我在網站上嵌入的視頻。當我創建這個配置,然後使用video_tag時,應用程序會通過video_controller,這會導致它在Video類中查找id =「movie」或視頻文件名稱的任何對象。任何想法如何解決這個問題? – wuliwong 2012-05-11 18:53:32

2

假設你的HTML是正確的,除非事情已經在軌3.1翻天覆地的變化包含在公用文件夾資產管道什麼可以從網絡服務器提供,因此存儲視頻的確切位置取決於您。根據上面的來源,您應該將視頻公開/資產,然後通過訪問http://localhost:3000/assets/movie.mp4(或視頻的任何其他src網址)確認視頻正在投放。

+0

Thanks.But在公共文件夾中沒有資產的子文件夾,但? – katie 2012-01-13 21:44:41

+0

您需要在公共場所創建一個名爲assets的新文件夾。Rails不會使用圖像,JavaScript和樣式表以外的默認值。 – 2012-01-13 22:08:29

4

資產管道用於靜態資產。如果您經常將視頻文件添加到應用程序,則應將其放在其他位置(例如,public/videospublic/system/videos)。如果它們確實是靜態資產,請嘗試先重新啓動服務器。

0

以服務爲靜態資產的視頻在軌道4,最好的方法是使用視頻標籤:

只需創建在「資產」稱爲「視頻」文件夾並存儲視頻有:

app/assets/videos/mycoolvideo.mp4 

然後在您的觀點:

<%= video_tag "mycoolvideo.mp4" %> 

如果需要指定大小,海報圖像或添加控件,添加(但這是HTML,而不是Rails的):

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

注意的Rails巧妙地知道該圖像位於圖像文件夾中,因此指定一個名稱就足夠了,不需要在圖像名稱前添加images /或assets/images /。

如果你想在很多視頻傳輸(或更好地說,在不同的格式相同的視頻),傳遞一個數組:

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

注意,對於大小您可以用尺寸:「寬x高」( 「640×360」)或單獨高度和寬度: