Active Storage: displaying video in video_tag
active storage + s3
active storage service_url
active storage download file
active storage s3 path
active storage content-type
active storage multiple images
active storage file size
In a Rails 5.2 app, I want to display a video previously uploaded in S3 via Active Storage. When I use this:
<%= video_tag [@banner_video.video_mp4, @banner_video.video_webm] %>
I get this error:
The asset "" is not present in the asset pipeline.
I checked in console, and my variable @banner_video is exactly what I think it should be.
I found a solution not using
video_tag, with a little hack.
<video> <source src=<%= rails_blob_path(@banner_video.video_mp4) %> type="video/mp4" /> <source src=<%= rails_blob_path(@banner_video.video_webm) %> type="video/webm" /> </video>
This is working, looks like
video_tag is not handling remote sources.
Add a background video to your landing page in Rails 5, The second reason is because the HTML <video> tag cannot be used to access the rails asset pipeline. If you're using Active Storage with Rails 5, you can also get a video directly from it as well. display: flex; Definition and Usage. The <video> tag specifies video, such as a movie clip or other video streams. Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg: MP4 = MPEG 4 files with H264 video codec and AAC audio codec. WebM = WebM files with VP8 video codec and Vorbis audio codec.
As said @metaphysiker This works as well: <%= video_tag rails_blob_path(session.video) %>
Active Storage For Video Uploads, Enjoy the videos and music you love, upload original content, and share it all with friends Duration: 10:48 Posted: Jun 1, 2018 How to Add and Play Videos in HTML This article will cover the Video tag available in HTML 5. I will demonstrate the functionality by giving some examples of playing videos from Youtube, Video File and Using DOM properties.
2 variants that I used to make it work
<% = video_tag url_for(@banner_video.file), size: "150x120", controls: true %>
or with to get S3 url
<% = video_tag @banner_video.file.service_url, size: "150x120", controls: true %>
Active Storage is not uploading video files mp4's, avi's, etc · Issue , For image files, Active Storage has no issue. Video files on the other hand, are not being attached at all. A spinner shows shortly before it disappears on the show page for the video. style: 'width: 100%; height: 6em;') %> 8: <%= video_tag(url_for(@story.story_video), style: 'width: 100%; height: 6em;', I'm trying to put a YouTube video source into the HTML5 <video> tag, but it doesn't seem to work. After some Googling, I found out that HTML5 doesn't support YouTube video URLs as a source.
Displaying, downloading and streaming files with Active Storage, Here is a quick'n'dirty cheat sheet for basic Active Storage actions. Attaching. # in model class Model has_one_attached :image Active Storage uses two tables in your application’s database named active_storage_blobs and active_storage_attachments. After creating a new application (or upgrading your application to Rails 5.2), run bin/rails active_storage:install to generate a migration that creates these tables.
Layouts and Rendering in Rails, Models: Active Record Basics · Active Record Migrations · Active Record If we want to display the properties of all the books in our view, we can do so with an ERB A stylesheet file can be stored in one of three locations: app/assets , lib/assets or The video_tag helper builds an HTML 5 <video> tag to the specified file. With the videos functioning, I then moved on to hosting the video files in my Blob Azure Development Storage and pointing to those files. Previously I had created a little application to upload files to Blob storage, so I used it to upload the files instead of any of the Azure file explorer applications.
ActionView::Helpers::AssetTagHelper, video_tag. Included Modules. ActionView::Helpers::AssetUrlHelper · ActionView::Helpers::TagHelper. Instance Public methods Source: show | on GitHub The source can be a full path, a file, or an Active Storage attachment. If sources is an array, a video tag with nested source tags for each source will be returned. HTML5 Video. In this tutorial you will learn how to embed video into an HTML document. Embedding Video in HTML Document. Inserting video onto a web page was not relatively easy, because web browsers did not have a uniform standard for defining embedded media files like video.
- I guess your question is duplicate.Take a look at this : stackoverflow.com/questions/46020753/…
- No, the video is not in the asset pipeline, it's hosted on a remote S3 bucket. I displayed images with no pb.
- Oh you are right.
- @Ruff9 how ur uploading into cloud ? what do u use?
- I did setup an ActiveAdmin interface, and a form with a file type field... my app is connected to my S3 bucket via Active Storage, and it works like a charm for images.
- In what might be considered vital if you don't know the content type, it's not necessary to render the video.
- This works as well: <%= video_tag rails_blob_path(session.video) %>
- Have you been able to play the video. I can only have the preview appear, which is the first frame of the video only. I want it to actually play...
- <%= video_tag rails_blob_path(session.video), controls: true %>. controls: true make you able to preview.