Vimeo의 비디오에 대한 썸네일 이미지를 얻고 싶습니다.
Youtube에서 이미지를 가져올 때 나는 다음과 같이합니다.
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Vimeo에 대해 어떻게 생각하십니까?
Vimeo의 비디오에 대한 썸네일 이미지를 얻고 싶습니다.
Youtube에서 이미지를 가져올 때 나는 다음과 같이합니다.
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
Vimeo에 대해 어떻게 생각하십니까?
답변:
로부터 메오 간단한 API를 워드 프로세서 :
비디오 요청하기
특정 동영상에 대한 데이터를 얻으려면 다음 URL을 사용하십시오.
http://vimeo.com/api/v2/video/video_id.output
video_id 정보를 원하는 비디오의 ID입니다.
출력 출력 유형을 지정하십시오. 현재 JSON, PHP 및 XML 형식을 제공합니다.
이 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>
축소판을 얻기 위해 모든 비디오에 대해 이것을 구문 분석하십시오
다음은 PHP의 대략적인 코드입니다.
<?php
$imgid = 6271487;
$hash = unserialize(file_get_contents("http://vimeo.com/api/v2/video/$imgid.php"));
echo $hash[0]['thumbnail_medium'];
xml
그래도 익숙하지 않습니다 . 어떻게 얻을 수 thumbnail_small
로 php
?
thumbnail_large
을 i.vimeocdn.com/video/23566238_640.webp 에서 i.vimeocdn.com/video/23566238_640.png 또는 i.vimeocdn.com/video/23566238_320.jpg
자바 스크립트에서 (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);
}
그것을 표시하려면 :
<img id="vimeo-{{ video.id_video }}" src="" alt="{{ video.title }}" />
<script type="text/javascript">
vimeoLoadingThumb({{ video.id_video }});
</script>
$(id_img).before
and $(id_img).attr
for createElement
and a basic 을 급습 getElementById(id_img).src
했지만 귀하의 모범이 아니라면 전혀 얻지 못했을 것입니다.
Vimeo의 API 응답을 구문 분석해야합니다. URL 호출 (dailymotion 또는 youtube 등)을 사용하는 방법은 없습니다.
내 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;
}
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>
. 섬네일 이미지로 채워집니다.
$.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json?callback=?', function (data) {...
Ruby를 사용하면 다음과 같이 말할 수 있습니다.
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'
파일뿐만 아니라 URI를 구문 분석하기 위해 open을 허용 해야 할 수도 있습니다.
다음은 C #을 사용하여 ASP.NET에서 동일한 작업을 수행하는 방법에 대한 예입니다. 다른 오류 포착 이미지를 자유롭게 사용하십시오. :)
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";
}
}
참고 : 요청시 API 요청은 다음과 같아야합니다. 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; } }
비디오 ID를 검색하지 않고 미리보기 이미지를 얻는 가장 쉬운 JavaScript 방법은 다음을 사용하는 것입니다.
//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);
}
});
참고 : 누군가가 비디오 ID와 관련된 비디오 축소판을 가져와야하는 경우 비디오 ID로 바꾸고 $id
비디오 세부 정보가있는 XML을 얻을 수 있습니다.
http://vimeo.com/api/v2/video/$id.xml
예:
http://vimeo.com/api/v2/video/198340486.xml
$id
비디오 세부 정보가있는 XML을 얻을 것이다 (축소판 포함). http://vimeo.com/api/v2/video/$id.xml
. 예를 들면 다음과 같습니다 http://vimeo.com/api/v2/video/198340486.xml
.. 출처는 다음과 같습니다 : coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video
순수한 js / jquery no api를 통해 썸네일을 사용하려는 경우이 도구를 사용하여 비디오 및 voila에서 프레임을 캡처 할 수 있습니다! 당신이 좋아하는 곳에서 URL 엄지 손가락을 삽입하십시오.
코드 펜은 다음과 같습니다.
<img src="https://i.vimeocdn.com/video/531141496_640.jpg"` alt="" />
섬네일을 얻는 사이트는 다음과 같습니다.
Vimeo url ( https://player.vimeo.com/video/30572181 )을 사용하는 예는 다음과 같습니다.
<!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>
api / v2가 죽은 것 같습니다.
새로운 API를 사용하려면, 당신은 할 필요가 응용 프로그램을 등록 하고, base64로는 인코딩 client_id
및 client_secret
권한 부여 헤더로.
$.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);
}
});
보안을 위해, 당신은 반환 할 수 있습니다 client_id
및 client_secret
이미 서버에서 인코딩.
이것은 빠르고 교묘 한 방법이며 사용자 정의 크기를 선택하는 방법입니다.
나는 여기에 간다 :
http://vimeo.com/api/v2/video/[VIDEO ID].php
파일을 다운로드하여 연 다음 640 픽셀 너비의 썸네일을 찾으십시오. 형식은 다음과 같습니다.
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_640.jpg
링크를 가져 와서 640을 예를 들어 1400으로 변경하면 다음과 같은 결과가 나타납니다.
https://i.vimeocdn.com/video/[LONG NUMBER HERE]_1400.jpg
브라우저 검색 창에 붙여넣고 즐기십시오.
건배,
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);
});
}
}
실제로 그 질문을 한 사람은 자신의 답변을 게시했습니다.
"Vimeo가 HTTP 요청을하고 그들이 반환하는 XML에서 썸네일 URL을 추출하기를 원하는 것 같습니다 ..."
Vimeo API 문서는 다음과 같습니다. http://vimeo.com/api/docs/simple-api
간단히 말해 앱은 다음과 같은 URL에 GET 요청을해야합니다.
http://vimeo.com/api/v2/video/video_id.output
반환 된 데이터를 구문 분석하여 필요한 축소판 URL을 얻은 다음 해당 URL에서 파일을 다운로드하십시오.
나는 이것을 PHP에서 함수로 작성하여 누군가에게 유용하기를 바랍니다. 썸네일의 경로는 비디오 페이지의 링크 태그에 포함되어 있습니다. 이것은 나를 위해 속임수를 쓰는 것 같습니다.
$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;
그것이 누군가를 돕기를 바랍니다.
포그 슨
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;
}`
// 아래 함수는 축소판 URL을 전달합니다.
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;
}
Karthikeyan P의 답변을 분해하여 더 광범위한 시나리오에서 사용할 수 있습니다.
// 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;
};
Vimeo 비디오 URL에서 Vimeo ID를 가져옵니다.
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
Vimeo ID에서 vimeo 썸네일 URL을 가져옵니다.
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});
업데이트 : 이 솔루션은 2018 년 12 월부터 작동이 중지되었습니다.
나는 똑같은 것을 찾고 있었고 Vimeo API v2가 더 이상 사용되지 않아 대부분의 답변이 구식 인 것처럼 보입니다.
내 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;
위의 내용으로 Vimeo 기본 썸네일 이미지에 대한 링크가 제공됩니다.
다른 크기의 이미지를 사용하려면 다음과 같이 추가하십시오.
$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';
자동화 된 솔루션이 필요하지 않은 경우 여기에 vimeo ID를 입력하여 축소판 URL을 찾을 수 있습니다. http://video.depone.eu/
이미지를 가져 오는 CodePen을 만들었습니다.
HTML
<input type="text" id="vimeoid" placeholder="257314493" value="257314493">
<button id="getVideo">Get Video</button>
<div id="output"></div>
자바 스크립트 :
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);
}
});
다른 솔루션을 찾고 vimeo 계정을 관리 할 수있는 다른 방법이 있다면 앨범에 표시하려는 모든 비디오를 추가 한 다음 API를 사용하여 앨범 세부 정보를 요청하면 모든 축소판과 링크가 표시됩니다 . 이상적이지는 않지만 도움이 될 수 있습니다.
Matt Hooks의 보석을 살펴볼 수도 있습니다. https://github.com/matthooks/vimeo
API에 간단한 vimeo 래퍼를 제공합니다.
video_id (및 다른 비디오 사이트를 수행하는 경우 공급자)를 저장하기 만하면됩니다.
이렇게 vimeo 비디오 ID를 추출 할 수 있습니다
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
튜브가 필요한 경우이 유용한 정보를 찾을 수 있습니다.
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
최근에 이것을 알아 내려고 노력하는 나와 같은 누군가에게
https://i.vimeocdn.com/video/[video_id]_[dimension].webp
나를 위해 작동합니다.
(여기서 dimension
= 200x150 | 640)