Преобразование обычной ссылки Youtube во встроенное видео
Моя цель: я пытаюсь разрешить пользователям вставлять ссылку на видео Youtube на моем сайте, предоставляя мне контроль над настройками проигрывателя.
Я хотел бы сделать это, только попросив пользователя указать ссылку (не весь код для встраивания), откуда я могу как-то вставить эту ссылку в код для встраивания.
Я пробовал сделать простую замену несколькими ссылками Youtube (http://youtu.be/...), но они не работают, говоря, что "фильм не загружен". Есть ли надежный способ сделать это?
Ответы
Ответ 1
Я делаю это довольно часто для клиентов, суть в том, что вы анализируете идентификатор из URL-адреса, а затем генерируете iframe HTML, используя это.
def youtube_embed(youtube_url)
if youtube_url[/youtu\.be\/([^\?]*)/]
youtube_id = $1
else
# Regex from # http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url/4811367#4811367
youtube_url[/^.*((v\/)|(embed\/)|(watch\?))\??v?=?([^\&\?]*).*/]
youtube_id = $5
end
%Q{<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/#{ youtube_id }" frameborder="0" allowfullscreen></iframe>}
end
youtube_embed('youtu.be/jJrzIdDUfT4')
# => <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/jJrzIdDUfT4" frameborder="0" allowfullscreen></iframe>
Я помещал это в помощника. Измените высоту, ширину и параметры по вкусу.
Ответ 2
Еще один ответ - использовать этот драгоценный камень, который обрабатывает youtube и vimeo, и может быть расширен до большего. Он также хорошо интегрируется с AR, поэтому вы можете кэшировать полученный html вместо фильтрации на каждом рендере:
https://github.com/dejan/auto_html
Ответ 3
Я использовал наивысший рейтинг с функцией youtube_embed, но когда я реализовал на мой взгляд, я видел, что код iframe появляется на моей странице, но нет видео. Я добавил raw перед вызовом функции, и теперь все хорошо с этой страницей.
Внутри моего view.html.erb
<p><%= raw(youtube_embed(@experiment.researchsection.videolink)) %></p>
Ответ 4
что-то вроде этого (например, в модели):
@@video_regexp = [ /^(?:https?:\/\/)?(?:www\.)?youtube\.com(?:\/v\/|\/watch\?v=)([A-Za-z0-9_-]{11})/,
/^(?:https?:\/\/)?(?:www\.)?youtu\.be\/([A-Za-z0-9_-]{11})/,
/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/user\/[^\/]+\/?#(?:[^\/]+\/){1,4}([A-Za-z0-9_-]{11})/
]
def video_id
@@video_regexp.each { |m| return m.match(source_url)[1] unless m.nil? }
end
где source_url - полная ссылка на видео.
затем помощник:
def youtube_video(video_id)
render :partial => 'youtube_video', :locals => { :id => video_id }
end
и пример частичного (haml):
%iframe{:allowfullscreen => "", :frameborder => "0", :height => "349",
:src => "http://www.youtube.com/embed/#{id}", :width => "560"}
и так просто:
= youtube_video Model.video_id
Ответ 5
Это то, что использует youtube:
<iframe width="425" height="349" src="http://www.youtube.com/embed/zb-gmJVW5lw" frameborder="0" allowfullscreen></iframe>
Затем просто используйте regexp для изменения ссылки:
http://www.youtube.com/watch?v=zb-gmJVW5lw
в
http://www.youtube.com/embed/zb-gmJVW5lw
Здесь доказательство регулярного выражения для соответствия регулярных ссылок на YouTube:
И здесь доказательство концепции regexp для сопоставления ссылок youtu.be:
Обратите внимание, что URL-адрес вставки можно также загрузить в браузере, который открывает страницу, где видео полноэкранный.
Ответ 6
Мне пришлось включить эту функциональность в один из моих последних проектов. Мне пришлось поддерживать связь как с видео YouTube, так и с Vimeo. Я использую модуль uri Ruby и HTTParty. В основном я пришел со следующим:
class LinkVideo < ActiveRecord::Base
require 'uri'
include HTTParty
cattr_reader :per_page
@@per_page = 12
belongs_to :user
validates :weblink, :presence => true, :domain => true
def embed(width = "640", height = "390")
embed_code = nil
case base_uri
when "www.youtube.com"
embed_code = "<object width='#{width}' height='#{height}'>" +
"<param name='movie' value='#{url}'></param>" +
"<param name='allowFullScreen' value='false'></param>" +
"<param name='allowscriptaccess' value='always'></param>" +
"<embed src='#{url}' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='false'
width='#{width}' height='#{height}'> </embed>" +
"</object>"
when "www.vimeo.com"
embed_code = "<iframe src='#{url}' width='#{width}' height='#{height}' frameborder='0'></iframe>"
end
embed_code
end
def url
url = nil
case base_uri
when "www.youtube.com"
url = "http://www.youtube.com/v/" + video_id + "&hl=en_US&fs=1"
when "www.vimeo.com"
url = "http://player.vimeo.com/video/" + video_id
end
url
end
def thumbnail
url = nil
case base_uri
when "www.youtube.com"
url = "http://img.youtube.com/vi/" + video_id + "/2.jpg"
when "www.vimeo.com"
url = thumbnail_path( image_base_uri, video_id )
end
url
end
# Video Paths:
# http://www.youtube.com/watch?v=Gqraan6sBjk
# http://www.vimeo.com/21618919
# Thumbnail Paths:
# http://img.youtube.com/vi/Gqraan6sBjk/2.jpg
private
def image_base_uri
image_base_uri = nil
case base_uri
when "www.youtube.com"
image_base_uri = "http://img.youtube.com/vi/"
when "www.vimeo.com"
image_base_uri = "http://vimeo.com/api/v2/video/"
end
image_base_uri
end
def thumbnail_path(base_uri, videoid = nil, format = 'xml')
path = nil
return path if base_uri.nil?
xml = HTTParty.get( base_uri + ( videoid.nil? ? video_id : videoid ) + format.insert(0, '.') )
values = xml.parsed_response.values_at("videos").first.fetch('video')
if values["user_portrait_medium"].include?('100')
path = values["user_portrait_medium"]
else values["user_portrait_large"].include?('100')
path = values["user_portrait_large"]
end
path
end
def base_uri
@uri ||= parse_it
@uri.host
end
def video_id
video_id = nil
case base_uri
when "www.youtube.com"
video_id = @uri.query.split('=')[1].slice(0, 11)
when "www.vimeo.com"
video_id = @uri.path.delete('/')
end
video_id
end
def parse_it
@uri = URI.parse( weblink )
end
end
Ответ 7
Возможно, вам захочется свернуть свое собственное решение, но стоит подумать о API-интерфейсе Embedly. http://embed.ly/
Ответ 8
Я думаю, что самый простой способ добиться того, что вы пытаетесь сделать, это следующее:
Вы пытаетесь получить от этого:
http://www.youtube.com/watch?v=zb-gmJVW5lw
Для этого:
<iframe width="640" height="360" src="http://www.youtube.com/embed/zb-gmJVW5l" frameborder="0" allowfullscreen></iframe>
Итак, вы можете просто сделать это:
#### Use a regular expression to extract the video code
@video_id = (/([\w-]{11})/.match(@v_url)).to_s
#### Put this information in the right format
@embed_code = "<iframe width='640' height='360' src='http://www.youtube.com/embed/#{@video_id}' frameborder='0' allowfullscreen></iframe>"
И затем, на ваш взгляд, просто выполните:
<%= raw(@embed_code) %>
Ответ 9
Я создал простой помощник для встраивания видео на YouTube:
# Helpers for better embedding and manipulation of videos
module VideosHelper
# Regex to find YouTube video ID
YOUTUBE_REGEX = %r(^(http[s]*:\/\/)?(www.)?(youtube.com|youtu.be)\/(watch\?v=){0,1}([a-zA-Z0-9_-]{11}))
# Embeds YouTube video of given URL in an iframe
#
# @param url [String] URL of desired video
# @param width [String] width of embedded video. Can be any valid CSS unit
# @param height [String] height of embedded video. Can be any valid CSS unit
# @return [String] HTML string of embedded video
def youtube_embed(url, width = "100%", height = "250px")
youtube_id = find_youtube_id(url)
result = %(<iframe title="YouTube video player" width="#{width}"
height="#{height}" src="//www.youtube.com/embed/#{ youtube_id }"
frameborder="0" allowfullscreen></iframe>)
result.html_safe
end
# Finds YouTube video ID from given URL or [nil] if URL is invalid
# The video ID matches the RegEx \[a-zA-Z0-9_-]{11}\
#
# @param url [String] URL of desired video
# @return [String] video ID of given URL
def find_youtube_id(url)
url = sanitize(url).to_str
matches = YOUTUBE_REGEX.match url
if matches
matches[6] || matches[5]
end
end
end
