7

所以，我有一个 Rails 应用程序，它允许用户提交 youtube 链接并使用竖起大拇指的 gem 对歌曲/链接进行排名。

但是，用户必须将链接复制并粘贴到浏览器中才能收听歌曲。为了获得更好的用户体验，我希望将提交的 YouTube 链接作为视频嵌入到应用程序中。那么，如何动态地做到这一点呢？

换句话说，您将能够提交一个 YouTube 链接，它将保存在例如 song_id(1) 中。您将能够单击 song_id(1)，而不仅仅是看到链接，您还将看到嵌入的 YouTube 视频。

更新了 show.html.erb： 

<%- model_class = Song -%>
<div class="page-header">
  <h1><%=t '.title', :default => model_class.model_name.human.titleize %></h1>
</div>

<dl class="dl-horizontal">
  <dt><strong><%= model_class.human_attribute_name(:title) %>:</strong></dt>
  <dd><%= @song.title %></dd>
  <dt><strong><%= model_class.human_attribute_name(:url) %>:</strong></dt>
  <dd><%= YouTubeAddy.extract_video_id(@song.url) %> </dd>


<iframe width="#{width}" height="#{height}" src="http://www.youtube.com/embed/#{youtube_id}" frameborder="0"></iframe>

歌曲助手.rb

module SongsHelper

  def youtube_id
    YouTubeAddy.extract_video_id(@song.url)
  end

end
4

3 回答 3

4

你可以

  1. 从提交的链接中提取youtube 视频的 id 。

    例如，有人提交此链接 http://www.youtube.com/watch?v=XwmtNk_Yb2Q

    你想要XwmtNk_Yb2Q

  2. 使用该ID，您可以渲染iframe嵌入视频的元素。

    <iframe width="#{width}" height="#{height}" src="http://www.youtube.com/embed/#{video_id}" frameborder="0"></iframe>

这就是@Elie Gnrd 建议 gem中的做法。

于 2013-08-02T07:33:50.343 回答
0

我已经分叉了一个要点并将其转换为一个适当的 Ruby 类，该类支持youtube和vimeo的嵌入 url 生成和/或 iframe 生成。

用法

url = 'https://youtu.be/OaDhY_y8WTo'
generator = VideoEmbedUrlGenerator.new(url)

generator.construct_url
#=> "https://www.youtube.com/embed/OaDhY_y8WTo"

generator.construct_iframe
#=> "<iframe width=\"640\" height=\"480\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen, src='https://www.youtube.com/embed/OaDhY_y8WTo'></iframe>"

可以在这里找到实现：gist

于 2019-09-29T03:32:38.993 回答
0

您可以将 youtube 视频或 vimeo 视频网址作为字符串保存在歌曲表内的视频列中。因此，要在您的展示页面中显示视频，您需要使用视频 ID 嵌入视频。因此，假设您有一个带有视频列的歌曲表。最初创建歌曲时，用户添加了一个 youtube url 或 vimeo url。太好了，现在您在数据库中获得了整个字符串。有许多不同的视频网址，例如 .be 和精选等，因此最好将它们全部覆盖并消除误差范围。

使用正则表达式，您应该做一些事情，检查提供者并提取 ID。所以你可以去你的助手并在你的模块中添加以下内容，或者你可以将它添加到songs_helper。

所以你application_helper.rb可以看起来像这样：

module ApplicationHelper
  def video_embed(video_url)

    # REGEX EXTRACT VIDEO ID
    regex_id = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/|vimeo\.com\/)([a-zA-Z0-9_-]{8,11})/
    match_id = regex_id.match(video_url)
    video_id = ""
    if match_id && !match_id[1].blank?
      video_id = match_id[1]
    end

    # REGEX EXTRACT PROVIDER - YOUTUBE OR VIMEO
    regex_prov = /(youtube|youtu\.be|vimeo)/
    match_prov = regex_prov.match(video_url)
    video_prov = ""
    if match_prov && !match_prov[1].blank?
      video_prov = case match_prov[1]
                     when "youtube"
                       :youtube
                     when "youtu.be"
                       :youtube
                     when "vimeo"
                       :vimeo
      end
    end

    case video_prov
      when :youtube
        "https://www.youtube.com/embed/#{video_id}"
      when :vimeo
        "https://player.vimeo.com/video/#{video_id}"
    end

  end
end

现在在你看来。假设songs/show.html.erb您只是调用该方法。

<iframe width="#{width}" height="#{height}" src="<%= video_embed(@song.video) %>" frameborder="0"></iframe>

更好的是，如果您使用的是引导程序，您可以使用所有很棒的引导程序类，如下所示：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="<%= video_embed(@song.video) %>" allowfullscreen></iframe>
</div>
于 2020-11-21T19:43:40.633 回答