HTML5 VIDEO无法在我的rails 3应用中运行
[英]HTML5 VIDEO is not working in my rails 3 app
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?
我正在尝试在开发中的Rails 3应用程序中显示HTML5视频,我正在使用Sqlite3和默认网络服务器(Webrick)。我将视频文件(movie.ogg)放在资产(assets / movie.ogg)下。视频窗口屏幕显示但是那里没有视频。我有3个问题...由于rails app资产没有视频子文件夹(就像它有图像的方式),你在哪里放视频文件? Webrick是否支持Html5视频?以下是我的代码,我在这里缺少什么才能使视频正常工作?
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 个解决方案
#1
10
The video_tag helper builds an HTML 5 <video> tag.
video_tag帮助程序构建HTML 5
By default, files are loaded from public/videos. To load from assets/video add the following line to your config/application.rb file:
默认情况下,文件是从公共/视频加载的。要从资源/视频加载,请将以下行添加到config / application.rb文件中:
config.assets.paths << "#{Rails.root}/app/assets/videos"
Tag Usage:
<%= video_tag (["movie.mp4", "movie.ogg", "movie.webm"] :size => "320x240", :controls => true, :autobuffer => true) %>
#2
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.
资产管道用于静态资产。如果您经常将视频文件添加到应用中,则应将其放在其他位置(例如,公共/视频或公共/系统/视频)。如果它们确实是静态资产,请尝试首先重新启动服务器。
#3
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).
假设您的html是正确的,除非在rails 3.1中使用资产管道发生显着变化,公共文件夹中包含的任何内容都可以从Web服务器提供,因此存储视频的确切位置取决于您。根据您上面的消息来源,您应该将您的视频放在公共/资产中,然后通过访问http:// localhost:3000 / assets / movie.mp4(或视频的任何其他src网址)确认视频正在提供。
#4
0
To serve videos as static assets in Rails 4, the best way is to use the video tag:
要在Rails 4中将视频作为静态资源提供,最好的方法是使用视频标记:
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):
如果您需要指定大小,海报图片或添加控件,请添加(但这是HTML,而不是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.
请注意,Rails巧妙地知道图像位于图像文件夹中,因此指定名称就足够了,而无需在图像名称之前添加图像/或assets / images /。
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:
请注意,对于尺寸调整,您可以使用尺寸:“widthxheight”(“640x360”)或单独使用尺寸:和宽度:
注意！
本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2012/01/13/7310027b58394e4327f6274222f68ae2.html。