9

Estoy tratando de mostrar video HTML5 en mi aplicación Rails 3 en desarrollo, estoy usando Sqlite3 y el servidor web predeterminado (Webrick). Puse el archivo de video (movie.ogg) en assets (assets/movie.ogg). Aparece la ventana de la ventana de video, pero no hay ningún video allí. Tengo 3 preguntas ... Dado que los recursos de la aplicación Rails no tienen una subcarpeta para video (como lo ha hecho). imágenes), ¿dónde colocas los archivos de video? ¿Webrick admite video Html5? Aquí está mi código a continuación, ¿qué me falta aquí, para que el video funcione?HTML5 VIDEO no funciona en la aplicación my rails 3

vista

 <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/inicializadores/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" 
}) 

Respuesta

10

El video_tag helper crea una etiqueta HTML 5 <video>.

De forma predeterminada, los archivos se cargan desde public/videos. Para cargar de activos/vídeo añada la siguiente línea a su archivo config/application.rb: Uso

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

Tag:

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

Tengo un modelo llamado Video, que es algo que el usuario crea, pero también necesito poder tener videos que incruste en el sitio. Cuando creo esta configuración y uso la etiqueta de video, la aplicación pasa por video_controller, lo que hace que busque un objeto en la clase Video con id = "movie" o el nombre del archivo de video. ¿Alguna idea de cómo solucionar esto? – wuliwong

2

Asumiendo que su html es correcta, a menos que las cosas han cambiado drásticamente en los carriles de 3,1 con el gasoducto activo nada de lo contenido en la carpeta pública puede ser servido desde el servidor web, por lo que la ubicación exacta de dónde almacenar videos depende de usted. De acuerdo con sus fuentes anteriores, debe poner sus videos en público/activos y luego confirmar que los videos están siendo servidos accediendo al http://localhost:3000/assets/movie.mp4 (o cualquier otra url de src para un video).

+0

Gracias. ¿Pero en la carpeta pública no hay una subcarpeta de activos? – katie

+0

Debe crear una nueva carpeta llamada activos en público.Rails no viene con valores predeterminados que no sean imágenes, javascripts y hojas de estilo. –

4

La canalización de activos se utiliza para activos estáticos. Si agrega archivos de video a su aplicación con frecuencia, debe ponerlos en otro lugar (por ejemplo, public/videos o public/system/videos). Si realmente son activos estáticos, intente reiniciar primero su servidor.

0

Para servir como vídeos activos estáticos en los carriles 4, la mejor manera es utilizar la etiqueta video:

basta con crear una carpeta en la llamada 'vídeos' 'activos' y almacenar los vídeos que hay:

app/assets/videos/mycoolvideo.mp4 

Luego, en sus puntos de vista:

<%= video_tag "mycoolvideo.mp4" %> 

Si necesita especificar una imagen de tamaño póster, o agregar controles, añadir (pero esto es HTML, no rieles):

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

Tenga en cuenta que Rails sabe hábilmente que la imagen está en la carpeta de la imagen, por lo que especificar un nombre es suficiente, sin agregar imágenes/o activos/imágenes/antes del nombre de la imagen.

Si desea pasar en muchos vídeos (o mejor dicho, el mismo vídeo en diferentes formatos), pasar una matriz:

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

Tenga en cuenta que para el dimensionamiento usted puede tamaño de utilización: "widthxheight" ("640x360") o altura por separado: y ancho:

Cuestiones relacionadas