如何将youtube视频动态嵌入rails应用程序

Question

因此，我有一个rails应用程序，允许用户提交youtube链接，并使用竖起大拇指的宝石对歌曲/链接进行排名。

但是，用户必须将链接物理复制并粘贴到浏览器中才能收听歌曲。为了获得更好的用户体验，我希望将提交的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

Answer 1

您可以

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建议的宝石中的做法。

Answer 2

我已经派生了一个gist，并将其转换为一个适当的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

Answer 3

您可以将youtube视频或vimeo视频url保存为歌曲表中视频列中的字符串。因此，要在您的节目页面中显示视频，您需要将视频与视频ID一起嵌入。因此，假设您有一个带有视频列的歌曲表。最初，当创建歌曲时，用户会添加一个youtube url或vimeo url。太好了，现在你已经在数据库中获得了整个字符串。有许多不同的视频网址，如.be和features等，所以最好涵盖所有网址，并消除误差。

使用regex，您应该做一些事情，检查提供程序并提取ID。因此，您可以转到Helpers并在模块中添加以下内容，也可以将其添加到songs_helper中。

所以你的application_helper.rb可以是这样的：

module ApplicationHelper
  def video_embed(video_url)
    # REGEX EXTRACT VIDEO ID
    regex_id = /(?:youtube(?:-nocookie)?.com/(?:[^/ns]+/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>