Asset helper: video

[jodosha]

Implement video helper.

See Lotus::Assets::Helpers and Lotus::Helpers::HtmlHelper for reference.

Usage

Basic Usage

<%= video 'movie.mp4' %>

<video src="/assets/movie.mp4"></video>

HTML Attributes

It must accept optional HTML attributes.

<%= video 'movie.mp4', autoplay: true, controls: true %>

<video src="/assets/movie.mp4" autoplay controls></video>

Fallback Content

It accepts an optional block for fallback content for browsers not supporting <video> tag.

<%=
  video 'movie.mp4' do
    "Your browser does not support the video tag"
  end
%>

<video src="/assets/movie.mp4">
  Your browser does not support the video tag
</video>

Tracks

It should support <track> tag.

<%=
  video 'movie.mp4' do
    track(kind: 'captions', src: asset_path('movie.en.vtt'), srclang: 'en', label: 'English')
    track(kind: 'captions', src: asset_path('movie.it.vtt'), srclang: 'it', label: 'Italiano')
  end
%>

<video src="movie.mp4">
  <track kind="captions" src="movie.en.vtt" srclang="en" label="English">
  <track kind="captions" src="movie.it.vtt" srclang="it" label="Italiano">
</video>

A few notes:

• For <video> reference, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
• In order to avoid concatenation between track invocations, use Lotus::Helpers::HtmlHelper internally.
• The helper used in this example asset_path, isn't implemented yet. See Asset path/url helpers #394

Sources

It should support <source> tag.

<%=
  video do
    text "Your browser does not support the video tag"
    source src: asset_path('movie.mp4'), type: 'video/mp4'
    source src: asset_path('movie.ogg'), type: 'video/ogg'
  end
%>

<video>
  Your browser does not support the video tag
  <source src="/assets/movie.mp4" type="video/mp4">
  <source src="/assets/movie.ogg" type="video/ogg">
</video>

A few notes:

• For <video> reference, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
• In order to avoid concatenation between source invocations, use Lotus::Helpers::HtmlHelper internally.
• The helper text doesn't map any HTML tag, but it's useful to concat pure text. See Add support for text inside other tags. helpers#30
• The helper used in this example asset_path, isn't implemented yet. See Asset path/url helpers #394

URL Prefix

This should take account of the prefix defined in Lotus::Assets::Configuration.

That means, if an application has a prefix: /admin, when one this helper is used, the prefix should be used.

<%= video 'movie.mp4' %>

<video src="/assets/admin/movie.mp4"></video>

Digest Mode

If "Digest Mode" is enabled (usually in production), it should generate the file name with the digest suffix (see https://github.com/lotus/assets/blob/master/lib/lotus/assets/configuration.rb#L37).

<%= video 'song.ogg' %>

<video src="/assets/movie-78a21a377046e9ddb3bd9b509c22d4c3.mp4"></video>

Testing Notes

Add an integration test with Lotus::View, in order to make sure that the output isn't escaped twice and produces a valid HTML.

[leighhalliday]

I'll give this one a go... my first time contributing to Lotus though so it may take a little bit and I may have some questions :)

[jodosha]

@leighhalliday Lovely, thank you! Ping me here on in chat for questions 😄

[jodosha]

Implemented by #407