ฉันต้องการรับภาพขนาดย่อสำหรับวิดีโอจาก Vimeo
เมื่อรับภาพจาก Youtube ฉันทำแบบนี้:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
มีความคิดวิธีทำอย่างไรสำหรับ Vimeo?
ฉันต้องการรับภาพขนาดย่อสำหรับวิดีโอจาก Vimeo
เมื่อรับภาพจาก Youtube ฉันทำแบบนี้:
http://img.youtube.com/vi/HwP5NG-3e8I/2.jpg
มีความคิดวิธีทำอย่างไรสำหรับ Vimeo?
คำตอบ:
จากเอกสารVimeo Simple 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
ใน javascript (ใช้ 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
และ$(id_img).attr
เพื่อcreateElement
และขั้นพื้นฐานมากขึ้นgetElementById(id_img).src
แต่จะไม่ได้รับเลยถ้ามันไม่ได้เป็นตัวอย่างของคุณ
คุณควรวิเคราะห์คำตอบของ API ของ Vimeo ไม่มีวิธีในการโทรแบบ 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>
- และนั่นจะเต็มไปด้วยภาพขนาดย่อ img
$.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 รวมถึงไฟล์
นี่คือตัวอย่างของวิธีการทำสิ่งเดียวกันใน ASP.NET โดยใช้ C # อย่าลังเลที่จะใช้รูปจับข้อผิดพลาดอื่น :)
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; } }
วิธี 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
ด้วยรหัสวิดีโอและรับ 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 และดึง URL ภาพขนาดย่อจาก XML ที่ส่งคืน ... "
เอกสาร Vimeo API อยู่ที่นี่: http://vimeo.com/api/docs/simple-api
กล่าวโดยย่อแอปของคุณจำเป็นต้องส่งคำขอ GET ไปยัง URL ดังนี้:
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;
หวังว่ามันจะช่วยให้ทุกคน
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;
}`
ฟังก์ชัน // ที่ด้านล่างส่ง 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:
var vimeoId = parseVimeoIdFromUrl(vimeoUrl);
รับ URL รูปขนาดย่อ vimeo จากรหัส Vimeo:
getVimeoThumbUrl(vimeoIds[0])
.done(function(img) {
$('div').append('<img src="' + img + '"/>');
});
UPDATE:โซลูชันนี้หยุดทำงานตั้งแต่ธันวาคม 2561
ฉันกำลังมองหาสิ่งเดียวกันและดูเหมือนว่าคำตอบส่วนใหญ่ที่นี่ล้าสมัยเนื่องจาก 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';
หากคุณไม่ต้องการโซลูชันอัตโนมัติคุณสามารถค้นหา URL รูปขนาดย่อได้โดยป้อนรหัส vimeo ที่นี่: 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>
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);
}
});
หากคุณกำลังมองหาโซลูชันทางเลือกและสามารถจัดการบัญชี vimeo ได้อีกวิธีหนึ่งคุณเพียงเพิ่มวิดีโอทุกรายการที่คุณต้องการแสดงลงในอัลบั้มจากนั้นใช้ API เพื่อขอรายละเอียดอัลบั้มจากนั้นแสดงรูปขนาดย่อและลิงก์ทั้งหมด . มันไม่เหมาะ แต่อาจช่วยได้
คุณอาจต้องการดูอัญมณีจาก Matt Hooks https://github.com/matthooks/vimeo
มันให้เสื้อคลุม vimeo ง่าย ๆ สำหรับ API
สิ่งที่คุณต้องมีก็คือการจัดเก็บ video_id (และผู้ให้บริการหากคุณกำลังทำเว็บไซต์วิดีโออื่น ๆ ด้วย)
คุณสามารถแยกรหัสวิดีโอ vimeo ได้
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
สำหรับผู้ที่ยังต้องการวิธีรับภาพขนาดย่อผ่าน URL เท่านั้นเช่นเดียวกับ Youtube แอปพลิเคชั่นขนาดเล็กที่สร้างขึ้นมาพร้อมกับรหัส Vimeo
https://vumbnail.com/358629078.jpg
เพียงแค่เสียบ ID วิดีโอของคุณและมันจะดึงมันและแคชเป็นเวลา 24 ชั่วโมงเพื่อให้บริการได้อย่างรวดเร็ว
สำหรับใครบางคนเช่นฉันที่กำลังพยายามคิดเรื่องนี้เมื่อเร็ว ๆ นี้
https://i.vimeocdn.com/video/[video_id]_[dimension].webp
ทำงานได้สำหรับฉัน
(โดยdimension
= 200x150 | 640)