Spec-Zone.ru › Ruby on Rails 7.1

модуль ActionView::Helpers::AssetTagHelper

Включенные модули:
ActionView::Helpers::AssetUrlHelper, ActionView::Helpers::TagHelper

Справочник тегов Action View для активов

Этот модуль предоставляет методы для создания HTML-ссылок, связывающих представления с активами, такими как изображения, JavaScript, стили и ленты. Эти методы не проверяют существование активов перед созданием ссылок:

image_tag("rails.png")
# => <img src="/assets/rails.png" />
stylesheet_link_tag("application")
# => <link href="/assets/application.css?body=1" rel="stylesheet" />

Методы публичного экземпляра

audio_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 581
def audio_tag(*sources)
  multiple_sources_tag_builder("audio", sources)
end

Возвращает тег HTML аудио для sources. Если sources — строка, возвращается один тег аудио. Если sources — массив, возвращается тег аудио с вложенными тегами source для каждого источника. sources могут быть полными путями, файлами, существующими в вашем общедоступном каталоге аудио, или вложениями Active Storage.

Если последний параметр — хеш, вы можете добавить атрибуты HTML с помощью этого параметра.

audio_tag("sound")
# => <audio src="/audios/sound"></audio>
audio_tag("sound.wav")
# => <audio src="/audios/sound.wav"></audio>
audio_tag("sound.wav", autoplay: true, controls: true)
# => <audio autoplay="autoplay" controls="controls" src="/audios/sound.wav"></audio>
audio_tag("sound.wav", "sound.mid")
# => <audio><source src="/audios/sound.wav" /><source src="/audios/sound.mid" /></audio>

Объекты Active Storage (аудиозаписи, загруженные пользователями вашего приложения):

audio_tag(user.name_pronunciation_audio)
# => <audio src="/rails/active_storage/blobs/.../name_pronunciation_audio.mp3"></audio>
auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 259
def auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {})
  if !(type == :rss || type == :atom || type == :json) && tag_options[:type].blank?
    raise ArgumentError.new("You should pass :type tag_option key explicitly, because you have passed #{type} type other than :rss, :atom, or :json.")
  end

  tag(
    "link",
    "rel"   => tag_options[:rel] || "alternate",
    "type"  => tag_options[:type] || Template::Types[type].to_s,
    "title" => tag_options[:title] || type.to_s.upcase,
    "href"  => url_options.is_a?(Hash) ? url_for(url_options.merge(only_path: false)) : url_options
  )
end

Возвращает тег ссылки, который браузеры и ридеры лент могут использовать для автоматического распознавания RSS, Atom или JSON ленты. type может быть :rss (по умолчанию), :atom, или :json. Управление параметрами ссылки в формате url_for с помощью url_options. Вы можете изменить сам тег LINK в tag_options.

Параметры

  • :rel — Укажите отношение этой ссылки, по умолчанию «alternate»

  • :type — Переопределите автоматически сгенерированный MIME тип

  • :title — Укажите заголовок ссылки, по умолчанию type

Примеры

auto_discovery_link_tag
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:atom)
# => <link rel="alternate" type="application/atom+xml" title="ATOM" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:json)
# => <link rel="alternate" type="application/json" title="JSON" href="http://www.currenthost.com/controller/action" />
auto_discovery_link_tag(:rss, {action: "feed"})
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/controller/feed" />
auto_discovery_link_tag(:rss, {action: "feed"}, {title: "My RSS"})
# => <link rel="alternate" type="application/rss+xml" title="My RSS" href="http://www.currenthost.com/controller/feed" />
auto_discovery_link_tag(:rss, {controller: "news", action: "feed"})
# => <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.currenthost.com/news/feed" />
auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", {title: "Example RSS"})
# => <link rel="alternate" type="application/rss+xml" title="Example RSS" href="http://www.example.com/feed.rss" />
favicon_link_tag(source = "favicon.ico", options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 300
def favicon_link_tag(source = "favicon.ico", options = {})
  tag("link", {
    rel: "icon",
    type: "image/x-icon",
    href: path_to_image(source, skip_pipeline: options.delete(:skip_pipeline))
  }.merge!(options.symbolize_keys))
end

Возвращает тег ссылки для favicon, управляемого конвейером активов.

Если на странице нет ссылки, сгенерированной этим хелпером, браузеры автоматически запрашивают /favicon.ico и кешируют файл, если запрос успешен. Если favicon меняется, его сложно обновить.

Для лучшего контроля приложения могут позволить конвейеру активов управлять своим favicon, храня файл по app/assets/images, и использовать этот хелпер для генерации соответствующего тега ссылки.

Хелпер получает имя файла favicon в качестве первого аргумента, по умолчанию «favicon.ico», а также поддерживает :rel и :type параметры для переопределения их значений по умолчанию, «icon» и «image/x-icon» соответственно:

favicon_link_tag
# => <link href="/assets/favicon.ico" rel="icon" type="image/x-icon" />

favicon_link_tag 'myicon.ico'
# => <link href="/assets/myicon.ico" rel="icon" type="image/x-icon" />

Mobile Safari ищет другой тег ссылки, указывающий на изображение, которое будет использовано, если вы добавите страницу на домашний экран устройства iOS. Следующий вызов сгенерирует такой тег:

favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
# => <link href="/assets/mb-icon.png" rel="apple-touch-icon" type="image/png" />
image_tag(source, options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 418
def image_tag(source, options = {})
  options = options.symbolize_keys
  check_for_image_tag_errors(options)
  skip_pipeline = options.delete(:skip_pipeline)

  options[:src] = resolve_asset_source("image", source, skip_pipeline)

  if options[:srcset] && !options[:srcset].is_a?(String)
    options[:srcset] = options[:srcset].map do |src_path, size|
      src_path = path_to_image(src_path, skip_pipeline: skip_pipeline)
      "#{src_path} #{size}"
    end.join(", ")
  end

  options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]

  options[:loading] ||= image_loading if image_loading
  options[:decoding] ||= image_decoding if image_decoding

  tag("img", options)
end

Возвращает тег HTML изображения для source. source может быть полным путем, файлом или вложением Active Storage.

Параметры

Вы можете добавить атрибуты HTML с помощью options. options поддерживает дополнительные ключи для удобства и соответствия:

  • :size — Предоставляется как "#{width}x#{height}" или "#{number}", поэтому "30x45" становится width="30" height="45", а "50" становится width="50" height="50". :size будет проигнорировано, если значение не в правильном формате.

  • :srcset — Если предоставлен как хеш или массив пар [source, descriptor], каждый путь к изображению будет расширен до того, как список будет отформатирован как строка.

Примеры

Активы (изображения, которые являются частью вашего приложения):

image_tag("icon")
# => <img src="/assets/icon" />
image_tag("icon.png")
# => <img src="/assets/icon.png" />
image_tag("icon.png", size: "16x10", alt: "Edit Entry")
# => <img src="/assets/icon.png" width="16" height="10" alt="Edit Entry" />
image_tag("/icons/icon.gif", size: "16")
# => <img src="/icons/icon.gif" width="16" height="16" />
image_tag("/icons/icon.gif", height: '32', width: '32')
# => <img height="32" src="/icons/icon.gif" width="32" />
image_tag("/icons/icon.gif", class: "menu_icon")
# => <img class="menu_icon" src="/icons/icon.gif" />
image_tag("/icons/icon.gif", data: { title: 'Rails Application' })
# => <img data-title="Rails Application" src="/icons/icon.gif" />
image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" })
# => <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x">
image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw")
# => <img src="/assets/pic.jpg" srcset="/assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw">

Объекты Active Storage (изображения, загруженные пользователями вашего приложения):

image_tag(user.avatar)
# => <img src="/rails/active_storage/blobs/.../tiger.jpg" />
image_tag(user.avatar.variant(resize_to_limit: [100, 100]))
# => <img src="/rails/active_storage/representations/.../tiger.jpg" />
image_tag(user.avatar.variant(resize_to_limit: [100, 100]), size: '100')
# => <img width="100" height="100" src="/rails/active_storage/representations/.../tiger.jpg" />
javascript_include_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 111
def javascript_include_tag(*sources)
  options = sources.extract_options!.stringify_keys
  path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
  preload_links = []
  use_preload_links_header = options["preload_links_header"].nil? ? preload_links_header : options.delete("preload_links_header")
  nopush = options["nopush"].nil? ? true : options.delete("nopush")
  crossorigin = options.delete("crossorigin")
  crossorigin = "anonymous" if crossorigin == true
  integrity = options["integrity"]
  rel = options["type"] == "module" ? "modulepreload" : "preload"

  sources_tags = sources.uniq.map { |source|
    href = path_to_javascript(source, path_options)
    if use_preload_links_header && !options["defer"] && href.present? && !href.start_with?("data:")
      preload_link = "<#{href}>; rel=#{rel}; as=script"
      preload_link += "; crossorigin=#{crossorigin}" unless crossorigin.nil?
      preload_link += "; integrity=#{integrity}" unless integrity.nil?
      preload_link += "; nopush" if nopush
      preload_links << preload_link
    end
    tag_options = {
      "src" => href,
      "crossorigin" => crossorigin
    }.merge!(options)
    if tag_options["nonce"] == true
      tag_options["nonce"] = content_security_policy_nonce
    end
    content_tag("script", "", tag_options)
  }.join("\n").html_safe

  if use_preload_links_header
    send_preload_links_header(preload_links)
  end

  sources_tags
end

Возвращает тег HTML script для каждого из предоставленных sources.

Источники могут быть путями к файлам JavaScript. Относительные пути предполагаются относительно assets/javascripts, полные пути предполагаются относительно корня документа. Относительные пути являются стандартными, используйте абсолютные пути только в необходимых случаях.

При передаче путей расширение «.js» является необязательным. Если вы не хотите добавлять «.js» к пути, extname: false можно установить в параметрах.

Вы можете изменить атрибуты HTML тега script, передав хеш в качестве последнего аргумента.

При включенном конвейере активов вы можете передать имя вашего файла манифеста как источник и включить другие файлы JavaScript или CoffeeScript внутри манифеста.

Если сервер поддерживает HTTP Early Hints и defer параметр не включен, Rails отправит ответ 103 Early Hints, который содержит ссылки на активы.

Параметры

Если последний параметр — хеш, вы можете добавить атрибуты HTML с помощью этого параметра. Это включает, но не ограничивается, следующими параметрами:

  • :extname — Добавить расширение к сгенерированному URL, если расширение еще не существует. Это относится только к относительным URL.

  • :protocol — Устанавливает протокол сгенерированного URL. Этот параметр применяется только когда указан относительный URL и host параметры.

  • :host — При указании относительного URL хост добавляется к этому пути.

  • :skip_pipeline — Этот параметр используется для обхода конвейера активов, если он установлен в true.

  • :nonce — Если установлено в true, добавляет автоматическое значение nonce, если включен Content Security Policy.

  • :async — Если установлено в true, добавляет атрибут HTML async, позволяя скрипту загружаться параллельно, чтобы его можно было обработать и выполнить как можно быстрее.

  • :defer — Если установлено в true, добавляет атрибут HTML defer, который указывает браузеру, что скрипт должен быть выполнен после разбора документа. Кроме того, предотвращает отправку заголовков Preload Links.

Любые другие указанные параметры будут рассматриваться как атрибуты HTML для тега script.

Для получения дополнительной информации о том, как параметры :async и :defer влияют на тег <script>, см. документацию MDN.

Примеры

javascript_include_tag "xmlhr"
# => <script src="/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "xmlhr", host: "localhost", protocol: "https"
# => <script src="https://localhost/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "template.jst", extname: false
# => <script src="/assets/template.debug-1284139606.jst"></script>

javascript_include_tag "xmlhr.js"
# => <script src="/assets/xmlhr.debug-1284139606.js"></script>

javascript_include_tag "common.javascript", "/elsewhere/cools"
# => <script src="/assets/common.javascript.debug-1284139606.js"></script>
#    <script src="/elsewhere/cools.debug-1284139606.js"></script>

javascript_include_tag "http://www.example.com/xmlhr"
# => <script src="http://www.example.com/xmlhr"></script>

javascript_include_tag "http://www.example.com/xmlhr.js"
# => <script src="http://www.example.com/xmlhr.js"></script>

javascript_include_tag "http://www.example.com/xmlhr.js", nonce: true
# => <script src="http://www.example.com/xmlhr.js" nonce="..."></script>

javascript_include_tag "http://www.example.com/xmlhr.js", async: true
# => <script src="http://www.example.com/xmlhr.js" async="async"></script>

javascript_include_tag "http://www.example.com/xmlhr.js", defer: true
# => <script src="http://www.example.com/xmlhr.js" defer="defer"></script>
picture_tag(*sources, &block) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 479
def picture_tag(*sources, &block)
  sources.flatten!
  options = sources.extract_options!.symbolize_keys
  image_options = options.delete(:image) || {}
  skip_pipeline = options.delete(:skip_pipeline)

  content_tag("picture", options) do
    if block.present?
      capture(&block).html_safe
    elsif sources.size <= 1
      image_tag(sources.last, image_options)
    else
      source_tags = sources.map do |source|
        tag("source",
         srcset: resolve_asset_source("image", source, skip_pipeline),
         type: Template::Types[File.extname(source)[1..]]&.to_s)
      end
      safe_join(source_tags << image_tag(sources.last, image_options))
    end
  end
end

Возвращает тег HTML picture для sources. Если sources — строка, возвращается один тег picture. Если sources — массив, возвращается тег picture с вложенными тегами source для каждого источника. sources могут быть полными путями, файлами, существующими в вашем общедоступном каталоге изображений, или вложениями Active Storage. Поскольку тегу picture нужен тег img, последний предоставленный элемент будет использован для тега img. Для полного контроля над тегом picture можно передать блок, который заполнит содержимое тега соответствующим образом.

Параметры

Если последний параметр — хеш, вы можете добавить атрибуты HTML с помощью этого параметра. Помимо всех поддерживаемых HTML параметров, поддерживаются:

  • :image — Hash параметров, которые передаются напрямую хелперу image_tag.

Примеры

picture_tag("picture.webp")
# => <picture><img src="/images/picture.webp" /></picture>
picture_tag("gold.png", :image => { :size => "20" })
# => <picture><img height="20" src="/images/gold.png" width="20" /></picture>
picture_tag("gold.png", :image => { :size => "45x70" })
# => <picture><img height="70" src="/images/gold.png" width="45" /></picture>
picture_tag("picture.webp", "picture.png")
# => <picture><source srcset="/images/picture.webp" /><source srcset="/images/picture.png" /><img src="/images/picture.png" /></picture>
picture_tag("picture.webp", "picture.png", :image => { alt: "Image" })
# => <picture><source srcset="/images/picture.webp" /><source srcset="/images/picture.png" /><img alt="Image" src="/images/picture.png" /></picture>
picture_tag(["picture.webp", "picture.png"], :image => { alt: "Image" })
# => <picture><source srcset="/images/picture.webp" /><source srcset="/images/picture.png" /><img alt="Image" src="/images/picture.png" /></picture>
picture_tag(:class => "my-class") { tag(:source, :srcset => image_path("picture.webp")) + image_tag("picture.png", :alt => "Image") }
# => <picture class="my-class"><source srcset="/images/picture.webp" /><img alt="Image" src="/images/picture.png" /></picture>
picture_tag { tag(:source, :srcset => image_path("picture-small.webp"), :media => "(min-width: 600px)") + tag(:source, :srcset => image_path("picture-big.webp")) + image_tag("picture.png", :alt => "Image") }
# => <picture><source srcset="/images/picture-small.webp" media="(min-width: 600px)" /><source srcset="/images/picture-big.webp" /><img alt="Image" src="/images/picture.png" /></picture>

Объекты Active Storage (изображения, загруженные пользователями вашего приложения):

picture_tag(user.profile_picture)
# => <picture><img src="/rails/active_storage/blobs/.../profile_picture.webp" /></picture>
preload_link_tag(source, options = {}) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 343
def preload_link_tag(source, options = {})
  href = path_to_asset(source, skip_pipeline: options.delete(:skip_pipeline))
  extname = File.extname(source).downcase.delete(".")
  mime_type = options.delete(:type) || Template::Types[extname]&.to_s
  as_type = options.delete(:as) || resolve_link_as(extname, mime_type)
  crossorigin = options.delete(:crossorigin)
  crossorigin = "anonymous" if crossorigin == true || (crossorigin.blank? && as_type == "font")
  integrity = options[:integrity]
  nopush = options.delete(:nopush) || false
  rel = mime_type == "module" ? "modulepreload" : "preload"

  link_tag = tag.link(**{
    rel: rel,
    href: href,
    as: as_type,
    type: mime_type,
    crossorigin: crossorigin
  }.merge!(options.symbolize_keys))

  preload_link = "<#{href}>; rel=#{rel}; as=#{as_type}"
  preload_link += "; type=#{mime_type}" if mime_type
  preload_link += "; crossorigin=#{crossorigin}" if crossorigin
  preload_link += "; integrity=#{integrity}" if integrity
  preload_link += "; nopush" if nopush

  send_preload_links_header([preload_link])

  link_tag
end

Возвращает тег ссылки, который браузеры могут использовать для предварительной загрузки source. source может быть путем к ресурсу, управляемому конвейером активов, полным путем или URI.

Параметры

  • :type — Переопределите автоматически сгенерированный MIME тип, по умолчанию MIME тип для расширения source.

  • :as — Переопределите автоматически сгенерированное значение атрибута, вычисленное с помощью расширения source и MIME типа.

  • :crossorigin — Укажите атрибут crossorigin, необходимый для загрузки ресурсов из других доменов.

  • :nopush — Укажите, нежелательно ли использовать серверные push для ресурса. По умолчанию false.

  • :integrity — Укажите атрибут integrity.

Примеры

preload_link_tag("custom_theme.css")
# => <link rel="preload" href="/assets/custom_theme.css" as="style" type="text/css" />

preload_link_tag("/videos/video.webm")
# => <link rel="preload" href="/videos/video.mp4" as="video" type="video/webm" />

preload_link_tag(post_path(format: :json), as: "fetch")
# => <link rel="preload" href="/posts.json" as="fetch" type="application/json" />

preload_link_tag("worker.js", as: "worker")
# => <link rel="preload" href="/assets/worker.js" as="worker" type="text/javascript" />

preload_link_tag("//example.com/font.woff2")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

preload_link_tag("//example.com/font.woff2", crossorigin: "use-credentials")
# => <link rel="preload" href="//example.com/font.woff2" as="font" type="font/woff2" crossorigin="use-credentials" />

preload_link_tag("/media/audio.ogg", nopush: true)
# => <link rel="preload" href="/media/audio.ogg" as="audio" type="audio/ogg" />
stylesheet_link_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 193
def stylesheet_link_tag(*sources)
  options = sources.extract_options!.stringify_keys
  path_options = options.extract!("protocol", "extname", "host", "skip_pipeline").symbolize_keys
  use_preload_links_header = options["preload_links_header"].nil? ? preload_links_header : options.delete("preload_links_header")
  preload_links = []
  crossorigin = options.delete("crossorigin")
  crossorigin = "anonymous" if crossorigin == true
  nopush = options["nopush"].nil? ? true : options.delete("nopush")
  integrity = options["integrity"]

  sources_tags = sources.uniq.map { |source|
    href = path_to_stylesheet(source, path_options)
    if use_preload_links_header && href.present? && !href.start_with?("data:")
      preload_link = "<#{href}>; rel=preload; as=style"
      preload_link += "; crossorigin=#{crossorigin}" unless crossorigin.nil?
      preload_link += "; integrity=#{integrity}" unless integrity.nil?
      preload_link += "; nopush" if nopush
      preload_links << preload_link
    end
    tag_options = {
      "rel" => "stylesheet",
      "crossorigin" => crossorigin,
      "href" => href
    }.merge!(options)

    if apply_stylesheet_media_default && tag_options["media"].blank?
      tag_options["media"] = "screen"
    end

    tag(:link, tag_options)
  }.join("\n").html_safe

  if use_preload_links_header
    send_preload_links_header(preload_links)
  end

  sources_tags
end

Возвращает тег ссылки на таблицу стилей для указанных в качестве аргументов источников.

При передаче путей расширение .css необязательно. Если вы не укажете расширение, .css будет добавлено автоматически. Если вы не хотите, чтобы .css добавлялось к пути, установите extname: false в параметрах. Вы можете изменить атрибуты ссылки, передав хэш в качестве последнего аргумента.

Если сервер поддерживает HTTP Early Hints, Rails будет отправлять 103 Early Hints ответ, содержащий ссылку на активы.

Параметры

  • :extname — Добавить расширение к сгенерированному URL, если расширение ещё не существует. Это относится только к относительным URL.

  • :protocol — Устанавливает протокол сгенерированного URL. Этот параметр применяется только при использовании относительного URL и host параметра.

  • :host — При использовании относительного URL хост добавляется к этому пути.

  • :skip_pipeline — Этот параметр используется для пропуска активов, когда он установлен в true.

Примеры

stylesheet_link_tag "style"
# => <link href="/assets/style.css" rel="stylesheet" />

stylesheet_link_tag "style.css"
# => <link href="/assets/style.css" rel="stylesheet" />

stylesheet_link_tag "http://www.example.com/style.css"
# => <link href="http://www.example.com/style.css" rel="stylesheet" />

stylesheet_link_tag "style.less", extname: false, skip_pipeline: true, rel: "stylesheet/less"
# => <link href="/stylesheets/style.less" rel="stylesheet/less">

stylesheet_link_tag "style", media: "all"
# => <link href="/assets/style.css" media="all" rel="stylesheet" />

stylesheet_link_tag "style", media: "print"
# => <link href="/assets/style.css" media="print" rel="stylesheet" />

stylesheet_link_tag "random.styles", "/css/stylish"
# => <link href="/assets/random.styles" rel="stylesheet" />
#    <link href="/css/stylish.css" rel="stylesheet" />
video_tag(*sources) Показать исходный код
# File actionview/lib/action_view/helpers/asset_tag_helper.rb, line 549
def video_tag(*sources)
  options = sources.extract_options!.symbolize_keys
  public_poster_folder = options.delete(:poster_skip_pipeline)
  sources << options
  multiple_sources_tag_builder("video", sources) do |tag_options|
    tag_options[:poster] = path_to_image(tag_options[:poster], skip_pipeline: public_poster_folder) if tag_options[:poster]
    tag_options[:width], tag_options[:height] = extract_dimensions(tag_options.delete(:size)) if tag_options[:size]
  end
end

Возвращает HTML тег видео для sources. Если sources — строка, будет возвращён один тег видео. Если sources — массив, будет возвращён тег видео с вложенными тегами источника для каждого источника. sources могут быть полными путями, файлами, существующими в вашем каталоге public videos, или объектами Active Storage.

Параметры

Когда последний параметр — хэш, вы можете добавить атрибуты HTML, используя этот параметр. Поддерживаются следующие параметры:

  • :poster — Устанавливает изображение (например, скриншот), которое отображается до загрузки видео. Путь рассчитывается как src от image_tag.

  • :size — Передаётся как "#{width}x#{height}" или "#{number}", поэтому "30x45" становится width="30" height="45", а "50" становится width="50" height="50". :size будет проигнорировано, если значение не в правильном формате.

  • :poster_skip_pipeline пропускает активы, когда используется параметр :poster, вместо использования актива из папки public.

Примеры

video_tag("trailer")
# => <video src="/videos/trailer"></video>
video_tag("trailer.ogg")
# => <video src="/videos/trailer.ogg"></video>
video_tag("trailer.ogg", controls: true, preload: 'none')
# => <video preload="none" controls="controls" src="/videos/trailer.ogg"></video>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png")
# => <video src="/videos/trailer.m4v" width="16" height="10" poster="/assets/screenshot.png"></video>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png", poster_skip_pipeline: true)
# => <video src="/videos/trailer.m4v" width="16" height="10" poster="screenshot.png"></video>
video_tag("/trailers/hd.avi", size: "16x16")
# => <video src="/trailers/hd.avi" width="16" height="16"></video>
video_tag("/trailers/hd.avi", size: "16")
# => <video height="16" src="/trailers/hd.avi" width="16"></video>
video_tag("/trailers/hd.avi", height: '32', width: '32')
# => <video height="32" src="/trailers/hd.avi" width="32"></video>
video_tag("trailer.ogg", "trailer.flv")
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
video_tag(["trailer.ogg", "trailer.flv"])
# => <video><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>
video_tag(["trailer.ogg", "trailer.flv"], size: "160x120")
# => <video height="120" width="160"><source src="/videos/trailer.ogg" /><source src="/videos/trailer.flv" /></video>

Объекты Active Storage (видео, загруженные пользователями вашего приложения):

video_tag(user.intro_video)
# => <video src="/rails/active_storage/blobs/.../intro_video.mp4"></video>

© 2004–2021 David Heinemeier Hansson
Licensed under the MIT License.

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API