Chcę uzyskać miniaturę obrazu wideo z Vimeo.
Kiedy otrzymuję obrazy z Youtube, po prostu robię to tak:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Masz pomysł, jak zrobić dla Vimeo?
Chcę uzyskać miniaturę obrazu wideo z Vimeo.
Kiedy otrzymuję obrazy z Youtube, po prostu robię to tak:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Masz pomysł, jak zrobić dla Vimeo?
Odpowiedzi:
Z dokumentacji API Vimeo Simple API :
Zgłaszanie prośby o wideo
Aby uzyskać dane o konkretnym filmie, użyj następującego adresu URL:
http://vimeo.com/api/v2/video/video_id.output
video_id Identyfikator wideo, dla którego chcesz uzyskać informacje.
wyjście Określ typ wyjścia. Obecnie oferujemy formaty JSON, PHP i XML.
Uzyskanie tego adresu URL http://vimeo.com/api/v2/video/6271487.xml
<videos>
<video>
[skipped]
<thumbnail_small>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_100.jpg</thumbnail_small>
<thumbnail_medium>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_200.jpg</thumbnail_medium>
<thumbnail_large>http://ts.vimeo.com.s3.amazonaws.com/235/662/23566238_640.jpg</thumbnail_large>
[skipped]
</videos>
Analizuj to dla każdego filmu, aby uzyskać miniaturę
Oto przybliżony kod w PHP
<?php
$imgid = 6271487;
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $hash[0]['thumbnail_medium'];
xml
jednak na tym. Jak mogę dostać thumbnail_small
się php
?
thumbnail_large
z i.vimeocdn.com/video/23566238_640.webp na i.vimeocdn.com/video/23566238_640.png lub i.vimeocdn.com/video/23566238_320.jpg
W javascript (używa jQuery):
function vimeoLoadingThumb(id){
var url = "http://vimeo.com/api/v2/video/" + id + ".json?callback=showThumb";
var id_img = "#vimeo-" + id;
var script = document.createElement( 'script' );
script.src = url;
$(id_img).before(script);
}
function showThumb(data){
var id_img = "#vimeo-" + data[0].id;
$(id_img).attr('src',data[0].thumbnail_medium);
}
Aby go wyświetlić:
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb({{ video.id_video }});
</script>
$(id_img).before
i $(id_img).attr
na createElement
i bardziej podstawowy getElementById(id_img).src
, ale nie dostałbym go wcale, gdyby nie twój przykład.
Powinieneś przeanalizować odpowiedź API Vimeo. Nie da się tego zrobić za pomocą wywołań URL (takich jak dailymotion lub youtube).
Oto moje rozwiązanie PHP:
/**
* Gets a vimeo thumbnail url
* @param mixed $id A vimeo id (ie. 1185346)
* @return thumbnail's url
*/
function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
}
Za pomocą żądania jQuery jsonp:
<script type="text/javascript">
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + video_id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumbnail_src = data[0].thumbnail_large;
$('#thumb_wrapper').append('<img src="' + thumbnail_src + '"/>');
}
});
</script>
<div id="thumb_wrapper"></div>
<div id='12345678' class='vimeo_thumb'></div>
- i to byłoby wypełnione miniaturą img.
$.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json?callback=?', function (data) {...
Z Ruby możesz wykonać następujące czynności, powiedzmy:
url = "http://www.vimeo.com/7592893"
vimeo_video_id = url.scan(/vimeo.com\/(\d+)\/?/).flatten.to_s # extract the video id
vimeo_video_json_url = "http://vimeo.com/api/v2/video/%s.json" % vimeo_video_id # API call
# Parse the JSON and extract the thumbnail_large url
thumbnail_image_location = JSON.parse(open(vimeo_video_json_url).read).first['thumbnail_large'] rescue nil
require 'open-uri'
zezwolenie na otwieranie w celu analizowania identyfikatorów URI oraz plików.
Oto przykład, jak zrobić to samo w ASP.NET za pomocą C #. Możesz użyć innego obrazu błędu łapania :)
public string GetVimeoPreviewImage(string vimeoURL)
{
try
{
string vimeoUrl = System.Web.HttpContext.Current.Server.HtmlEncode(vimeoURL);
int pos = vimeoUrl.LastIndexOf(".com");
string videoID = vimeoUrl.Substring(pos + 4, 8);
XmlDocument doc = new XmlDocument();
doc.Load("http://vimeo.com/api/v2/video/" + videoID + ".xml");
XmlElement root = doc.DocumentElement;
string vimeoThumb = root.FirstChild.SelectSingleNode("thumbnail_medium").ChildNodes[0].Value;
string imageURL = vimeoThumb;
return imageURL;
}
catch
{
//cat with cheese on it's face fail
return "http://bestofepicfail.com/wp-content/uploads/2008/08/cheese_fail.jpg";
}
}
UWAGA: Twoje żądanie interfejsu API powinno wyglądać tak na żądanie: http://vimeo.com/api/v2/video/32660708.xml
public static string GetVimeoPreviewImage(string id) { try { XmlDocument doc = new XmlDocument(); doc.Load("http://vimeo.com/api/v2/video/" + id + ".xml"); return doc.DocumentElement.FirstChild.SelectSingleNode("thumbnail_medium").ChildNodes[0].Value; } catch { return string.Empty; } }
Najprostszym sposobem, w jaki znalazłem miniaturę JavaScript, bez wyszukiwania identyfikatora wideo, jest:
//Get the video thumbnail via Ajax
$.ajax({
type:'GET',
url: 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(url),
dataType: 'json',
success: function(data) {
console.log(data.thumbnail_url);
}
});
Uwaga: jeśli ktoś chce uzyskać miniaturę wideo związaną z identyfikatorem wideo, może zastąpić $id
identyfikator wideo i uzyskać plik XML ze szczegółami wideo:
http://vimeo.com/api/v2/video/$id.xml
Przykład:
http://vimeo.com/api/v2/video/198340486.xml
$id
a otrzymasz XML ze szczegółami wideo (w tym miniatury). http://vimeo.com/api/v2/video/$id.xml
. na przykład: http://vimeo.com/api/v2/video/198340486.xml
. Źródło jest tutaj: coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
Jeśli chcesz użyć miniatury poprzez czysty js / jquery no api, możesz użyć tego narzędzia do przechwytywania klatki z wideo i voila! Wstaw kciuk URL-a do dowolnego źródła.
Oto pióro do kodu:
<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />
Oto strona z miniaturą:
Korzystając z adresu URL Vimeo ( https://player.vimeo.com/video/30572181 ), oto mój przykład
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<title>Vimeo</title>
</head>
<body>
<div>
<img src="" id="thumbImg">
</div>
<script>
$(document).ready(function () {
var vimeoVideoUrl = 'https://player.vimeo.com/video/30572181';
var match = /vimeo.*\/(\d+)/i.exec(vimeoVideoUrl);
if (match) {
var vimeoVideoID = match[1];
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', { format: "json" }, function (data) {
featuredImg = data[0].thumbnail_large;
$('#thumbImg').attr("src", featuredImg);
});
}
});
</script>
</body>
</html>
Wygląda na to, że api / v2 nie żyje.
Aby korzystać z nowego interfejsu API, musisz zarejestrować aplikację , a kod base64 koduje client_id
i client_secret
jako nagłówek autoryzacji.
$.ajax({
type:'GET',
url: 'https://api.vimeo.com/videos/' + video_id,
dataType: 'json',
headers: {
'Authorization': 'Basic ' + window.btoa(client_id + ":" + client_secret);
},
success: function(data) {
var thumbnail_src = data.pictures.sizes[2].link;
$('#thumbImg').attr('src', thumbnail_src);
}
});
Ze względów bezpieczeństwa możesz zwrócić client_id
i client_secret
już zakodowane z serwera.
Jest to szybki, sprytny sposób na zrobienie tego, a także sposób na wybranie niestandardowego rozmiaru.
Idę tutaj:
http://vimeo.com/api/v2/video/[VIDEO ID].php
Pobierz plik, otwórz go i znajdź miniaturę o szerokości 640 pikseli, będzie on miał taki format:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
Bierzesz link, zmieniasz 640 na, na przykład, 1400, i otrzymujesz coś takiego:
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg
Wklej go na pasku wyszukiwania przeglądarki i ciesz się.
Twoje zdrowie,
function parseVideo(url) {
// - Supported YouTube URL formats:
// - http://www.youtube.com/watch?v=My2FRPA3Gf8
// - http://youtu.be/My2FRPA3Gf8
// - https://youtube.googleapis.com/v/My2FRPA3Gf8
// - Supported Vimeo URL formats:
// - http://vimeo.com/25451551
// - http://player.vimeo.com/video/25451551
// - Also supports relative URLs:
// - //player.vimeo.com/video/25451551
url.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);
if (RegExp.$3.indexOf('youtu') > -1) {
var type = 'youtube';
} else if (RegExp.$3.indexOf('vimeo') > -1) {
var type = 'vimeo';
}
return {
type: type,
id: RegExp.$6
};
}
function getVideoThumbnail(url, cb) {
var videoObj = parseVideo(url);
if (videoObj.type == 'youtube') {
cb('//img.youtube.com/vi/' + videoObj.id + '/maxresdefault.jpg');
} else if (videoObj.type == 'vimeo') {
$.get('http://vimeo.com/api/v2/video/' + videoObj.id + '.json', function(data) {
cb(data[0].thumbnail_large);
});
}
}
W rzeczywistości facet, który zadał to pytanie, opublikował własną odpowiedź.
„Wygląda na to, że Vimeo chce, żebym wysłał żądanie HTTP i wyodrębnił URL miniatury z XML, który zwraca…”
Dokumenty API Vimeo znajdują się tutaj: http://vimeo.com/api/docs/simple-api
Krótko mówiąc, Twoja aplikacja musi wysłać żądanie GET na adres URL podobny do następującego:
http://vimeo.com/api/v2/video/video_id.output
i przeanalizuj zwrócone dane, aby uzyskać wymagany URL miniatury, a następnie pobierz plik pod tym adresem URL.
Napisałem funkcję w PHP, aby mi na to pozwolić, mam nadzieję, że będzie dla kogoś przydatna. Ścieżka do miniatury znajduje się w tagu linku na stronie filmu. Wydaje mi się, że to załatwia sprawę.
$video_url = "http://vimeo.com/7811853"
$file = fopen($video_url, "r");
$filedata = stream_get_contents($file);
$html_content = strpos($filedata,"<link rel=\"videothumbnail");
$link_string = substr($filedata, $html_content, 128);
$video_id_array = explode("\"", $link_string);
$thumbnail_url = $video_id_array[3];
echo $thumbnail_url;
Mam nadzieję, że to pomoże każdemu.
Foggson
function getVimeoInfo($link)
{
if (preg_match('~^http://(?:www\.)?vimeo\.com/(?:clip:)?(\d+)~', $link, $match))
{
$id = $match[1];
}
else
{
$id = substr($link,10,strlen($link));
}
if (!function_exists('curl_init')) die('CURL is not installed!');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$output = unserialize(curl_exec($ch));
$output = $output[0];
curl_close($ch);
return $output;
}`
// poniżej funkcji przekaż adres URL miniatury.
function save_image_local($thumbnail_url)
{
//for save image at local server
$filename = time().'_hbk.jpg';
$fullpath = '../../app/webroot/img/videos/image/'.$filename;
file_put_contents ($fullpath,file_get_contents($thumbnail_url));
return $filename;
}
Rozkład odpowiedzi Karthikeyana P., aby można ją było wykorzystać w szerszej gamie scenariuszy:
// Requires jQuery
function parseVimeoIdFromUrl(vimeoUrl) {
var match = /vimeo.*\/(\d+)/i.exec(vimeoUrl);
if (match)
return match[1];
return null;
};
function getVimeoThumbUrl(vimeoId) {
var deferred = $.Deferred();
$.ajax(
'//www.vimeo.com/api/v2/video/' + vimeoId + '.json',
{
dataType: 'jsonp',
cache: true
}
)
.done(function (data) {
// .thumbnail_small 100x75
// .thumbnail_medium 200x150
// 640 wide
var img = data[0].thumbnail_large;
deferred.resolve(img);
})
.fail(function(a, b, c) {
deferred.reject(a, b, c);
});
return deferred;
};
Uzyskaj identyfikator Vimeo z adresu URL wideo Vimeo:
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
Uzyskaj adres URL miniatury vimeo z identyfikatora Vimeo:
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});
AKTUALIZACJA: To rozwiązanie przestało działać od grudnia 2018 r.
Szukałem tego samego i wygląda na to, że większość odpowiedzi tutaj jest nieaktualna, ponieważ Vimeo API v2 jest przestarzałe.
mój php 2 ¢:
$vidID = 12345 // Vimeo Video ID
$tnLink = json_decode(file_get_contents('https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/' . $vidID))->thumbnail_url;
z powyższym otrzymasz link do domyślnej miniatury Vimeo.
Jeśli chcesz użyć obrazu o innym rozmiarze, możesz dodać coś takiego:
$tnLink = substr($tnLink, strrpos($tnLink, '/') + 1);
$tnLink = substr($tnLink, 0, strrpos($tnLink, '_')); // You now have the thumbnail ID, which is different from Video ID
// And you can use it with link to one of the sizes of crunched by Vimeo thumbnail image, for example:
$tnLink = 'https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F' . $tnLink . '_1280x720.jpg&src1=https%3A%2F%2Ff.vimeocdn.com%2Fimages_v6%2Fshare%2Fplay_icon_overlay.png';
Jeśli nie potrzebujesz automatycznego rozwiązania, możesz znaleźć adres URL miniatury, wprowadzając identyfikator vimeo tutaj: http://video.depone.eu/
Stworzyłem CodePen, który pobiera dla ciebie obrazy.
HTML
<input type="text" id="vimeoid" placeholder="257314493" value="257314493">
<button id="getVideo">Get Video</button>
<div id="output"></div>
JavaScript:
const videoIdInput = document.getElementById('vimeoid');
const getVideo = document.getElementById('getVideo');
const output = document.getElementById('output');
function getVideoThumbnails(videoid) {
fetch(`https://vimeo.com/api/v2/video/${videoid}.json`)
.then(response => {
return response.text();
})
.then(data => {
const { thumbnail_large, thumbnail_medium, thumbnail_small } = JSON.parse(data)[0];
const small = `<img src="${thumbnail_small}"/>`;
const medium = `<img src="${thumbnail_medium}"/>`;
const large = `<img src="${thumbnail_large}"/>`;
output.innerHTML = small + medium + large;
})
.catch(error => {
console.log(error);
});
}
getVideo.addEventListener('click', e => {
if (!isNaN(videoIdInput.value)) {
getVideoThumbnails(videoIdInput.value);
}
});
Jeśli szukasz alternatywnego rozwiązania i możesz zarządzać kontem vimeo, istnieje inny sposób, po prostu dodajesz każdy film, który chcesz pokazać do albumu, a następnie używasz interfejsu API, aby poprosić o szczegóły albumu - wyświetla wtedy wszystkie miniatury i linki . To nie jest idealne, ale może pomóc.
Punkt końcowy interfejsu API (plac zabaw)
Konwój na Twitterze z @vimeoapi
Możesz rzucić okiem na klejnot z Matt Hooks. https://github.com/matthooks/vimeo
Zapewnia proste opakowanie vimeo dla interfejsu API.
Wszystko, czego potrzebujesz, to przechowywać identyfikator_video (i dostawcę, jeśli robisz również inne witryny z filmami)
Możesz wyodrębnić identyfikator wideo vimeo w ten sposób
def
get_vimeo_video_id (link)
vimeo_video_id = nil
vimeo_regex = /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
vimeo_match = vimeo_regex.match(link)
if vimeo_match.nil?
vimeo_regex = /http:\/\/player.vimeo.com\/video\/([a-z0-9-]+)/
vimeo_match = vimeo_regex.match(link)
end
vimeo_video_id = vimeo_match[2] unless vimeo_match.nil?
return vimeo_video_id
end
a jeśli potrzebujesz tuby, może ci się to przydać
def
get_youtube_video_id (link)
youtube_video_id = nil
youtube_regex = /^(https?:\/\/)?(www\.)?youtu.be\/([A-Za-z0-9._%-]*)(\&\S+)?/
youtube_match = youtube_regex.match(link)
if youtube_match.nil?
youtubecom_regex = /^(https?:\/\/)?(www\.)?youtube.com\/watch\?v=([A-Za-z0-9._%-]*)(\&\S+)?/
youtube_match = youtubecom_regex.match(link)
end
youtube_video_id = youtube_match[3] unless youtube_match.nil?
return youtube_video_id
end
Dla tych, którzy wciąż chcą uzyskać miniaturę tylko za pomocą adresu URL, podobnie jak Youtube, wbudowana mała aplikacja, która pobiera ją tylko za pomocą identyfikatora Vimeo.
https://vumbnail.com/358629078.jpg
Po prostu podłącz swój identyfikator wideo, a on wyciągnie go i buforuje przez 24 godziny, dzięki czemu działa szybko.
Jeśli chcesz stworzyć własną, możesz to zrobić tutaj .
Dla kogoś takiego jak ja, który ostatnio próbuje to rozgryźć,
https://i.vimeocdn.com/video/[video_id]_[dimension].webp
pracuje dla mnie.
(gdzie dimension
= 200 x 150 | 640)