5

上下文

我有一段(jQuery)ajax 代码已经愉快地工作了大约 9 个月,直到最后几周左右。

此代码使用 Instagram 的嵌入端点,它允许我从普通的 Instagram 链接中获取媒体源(图像或视频),http://instagram.com/p/BUG/无论用户是谁,也不需要access_token.

简化示例:

var URL = "http://api.instagram.com/oembed?url=http://instagram.com/p/BUG/";
$(document).ready(function () {
    $.ajax({
        url: URL,
        dataType: "jsonp",
        cache: false,
        success: function (response) {
            console.log(response.url);
        },
        error: function () {
            console.log("couldn't process the instagram url");
        }
    });
});

在上面的代码中,response.url将返回完整的媒体 URL 源,如:

http://photos-a.ak.instagram.com/xxxx/1234_123456123_123456_n.jpg // image or
http://distilleryvesper3-15.ak.instagram.com/b0c957463548362858_101.mp4 // video

然后我可以使用返回的 URL 将媒体文件嵌入到我的网页中。

注意

由于这个想法是获取任何 Instagram 链接的 URL 源而与用户无关,因此不能选择使用媒体端点


问题

Instagram 的 oembed 端点允许您获取json响应,直到最近几周,它的结构是这样的:

{
    "provider_url" : "http:\/\/instagram.com\/",
    "media_id" : "123456789_123456789",
    "title" : "the title",
    "url" : "http:\/\/photos-a.ak.instagram.com\/hphotos-ak-xfp1\/12345678_123456789012345_1234567890_n.jpg",
    "author_name" : "{the user name}",
    "height" : 640,
    "width" : 640,
    "version" : "1.0",
    "author_url" : "http:\/\/instagram.com\/{the user name}",
    "author_id" : 123456789,
    "type" : "photo",
    "provider_name" : "Instagram"
}

url您可能已经注意到,我的 ajax 代码对包含完整媒体 URL的属性 name 特别感兴趣。

请注意,此json响应(与今天一样)对于 Instagram 图片仍然有效,但是,如果原始 Instagram 的链接是视频,让我们使用一个真实的示例:http: //instagram.com/p/mOFsFhAp4f/ (CocaCola(c))json响应不再返回任何url密钥。

似乎在引入网络嵌入之后, Instagram 决定用他们的(oembed)json 响应中url的一个属性替换密钥,该响应仅适用于视频,其中包含要嵌入的 iframe,例如:html

{
    ...

    "html" : "\u003ciframe src=\"http:\/\/instagram.com\/p\/BUG\/embed\" width=\"616\" height=\"716\" frameborder=\"0\" scrolling=\"no\" allowtransparency=\"true\"\u003e\u003c\/iframe\u003e",

    ...
}

...当然,这会破坏我的代码,因为response.url它是未定义的。


问题

Instagram json 响应发生更改后,如何获取完整视频的 URL?

不幸的是,我在 Instagram 的开发者网站上找不到任何合适的文档或更改日志(他们有很棒的 AP​​I,但文档很差。)

注意,问题是关于 Instagram API (v1) 嵌入端点而不是 jQuery 或 ajax 问题。

我正在寻找(可能是未记录的)Instagram 的 API 选项、端点、oembed 或其他(不需要access_token),它允许我从正常的 Instagram 链接中检索到媒体视频的直接链接(最好在 json 响应之后)无论用户......或愿意考虑一个不太老套的解决方法。

4

3 回答 3

6

这可能不是最佳或最佳答案,但我相信这会暂时解决您的问题,因此您可以考虑解决:

感谢whateverorigin.org 服务,我们能够获取跨源json,其中包含您可能请求的所有数据,您所要做的就是将返回的对象转换为字符串,然后使用正则表达式获取您需要的任何数据。

var myvideourl="http://instagram.com/p/mOFsFhAp4f/"
$.ajaxSetup({
    scriptCharset: "utf-8", //maybe "ISO-8859-1"
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent(myvideourl) + '&callback=?',
    function(data) {

        var xx=data.contents
        var dataindex=xx.search('<meta property="og:video" content=')
        var end=xx.indexOf('/>', dataindex);
        var yy=xx.slice(dataindex,end+2)
        var metaobject=$.parseHTML(yy)
        alert(metaobject[0].content)
        console.log(metaobject[0].content)
});

这是和示例:

JS 小提琴演示

对我来说效果很好,但只在可口可乐视频上试过,没有在其他链接上试过。

于 2014-07-06T08:01:13.833 回答
4

更新[2015 年 3 月]:有关此解决方案的扩展和更新版本,请访问http://www.picssel.com/build-a-simple-instagram-api-case-study/


@ProllyGeek 的回答提供了一个很好的解决方法来抓取 Instagram 视频页面(当之无愧的赏金),但是它依赖于whateverorigin.org第三方服务,除非该服务最终变得不可用,否则它将正常工作。

由于最近在生产环境中已经发生在我身上,我不得不寻找更可靠的替代方案,因此我决定使用 phpfile_get_contents从自己托管的 PHP 模块中抓取视频链接。

我基本上遵循@ProllyGeek 提出的相同逻辑,但翻译为 PHP,所以:

getVideoLink.php模块:

<?php
header('Content-Type: text/html; charset=utf-8');
function clean_input($data){
    $data = trim($data);
    $data = stripslashes($data);
    $data = strip_tags($data);
    $data = htmlspecialchars($data);
    return $data;
};
$instalink = clean_input( $_GET['instalink'] );    
if (!empty($instalink)) {
    $response = clean_input( @ file_get_contents( $instalink ) );
    $start_position = strpos( $response ,'video_url&quot;:&quot;' ); // the start position
    $start_positionlength = strlen('video_url&quot;:&quot;'); // string length to trim before
    $end_position = strpos($response ,'&quot;,&quot;usertags'); // the end position
    $mp4_link = substr( $response, ( $start_position + $start_positionlength ), ( $end_position - ( $start_position + $start_positionlength ) ) );
    echo $mp4_link;
};
?>

当然,您可能需要手动分析响应以了解您要查找的内容。

然后从我的主页对 PHP 模块进行 AJAX 调用:

var instaLink = "http://instagram.com/p/mOFsFhAp4f/"; // the Coca Cola video link
jQuery(document).ready(function ($) {
    $.ajax({
        url: "getVideoLink.php?instalink="+instaLink,
        dataType : "html",
        cache : false,
        success : function (data) {
            console.log(data); // returns http://distilleryvesper3-15.ak.instagram.com/b0ce80e6b91111e3a16a122b8b9af17f_101.mp4
        },
        error : function () {
            console.log("error in ajax");
        }
    });
}); // ready 

假设您的主机支持 php 以使用此方法。


编辑[2014 年 11 月 19 日]

我已经修改了getVideoLink.php模块(现在是getInstaLinkJSON.php)以实际从特定的 Instagram 媒体链接获取JSON信息,例如http://instagram.com/p/mOFsFhAp4f/

这比仅仅抓取视频的 URL 有用得多,也可以用于图像。

新的getInstaLinkJSON.php代码:

<?php
function clean_input($data){
    $data = trim($data);
    $data = strip_tags($data);
    return $data;
};
// clean user input
function clean_input_all($data){
    $data = trim($data);
    $data = stripslashes($data);
    $data = strip_tags($data);
    $data = htmlspecialchars($data);
    return $data;
};
$instaLink = clean_input_all( $_GET['instaLink'] );

if( !empty($instaLink) ){
    header('Content-Type: application/json; charset=utf-8');
    $response = clean_input( @ file_get_contents($instaLink) );
    $response_length = strlen($response);
    $start_position = strpos( $response ,'window._sharedData = ' ); // the start position
    $start_positionlength = strlen('window._sharedData = '); // string length to trim before
    $trimmed = trim( substr($response, ( $start_position + $start_positionlength ) ) ); // trim extra spaces and carriage returns
    $jsondata = substr( $trimmed, 0, -1); // remove extra ";" added at the end of the javascript variable 
    echo $jsondata;
} elseif( empty($instaLink) ) {
    die(); //only accepts instaLink as parameter
}
?>

我正在清理用户的输入和file_get_contents()响应,但是我不会从最后一个中删除斜杠HTML 字符,因为我将返回JSON响应。

然后 AJAX 调用:

var instaLink = "http://instagram.com/p/mOFsFhAp4f/"; // demo
jQuery.ajax({
    url: "getInstaLinkJSON.php?instalink=" + instaLink,
    dataType : "json", // important!!!
    cache : false,
    success : function ( response ) {
        console.log( response ); // returns json
        var media = response.entry_data.DesktopPPage[0].media;

        // get the video URL
        // media.is_video : returns true/false

        if( media.is_video ){
            console.log( media.video_url ); // returns http://distilleryvesper3-15.ak.instagram.com/b0ce80e6b91111e3a16a122b8b9af17f_101.mp4
        }
    },
    error : function () {
        console.log("error in ajax");
    }
});

编辑[2020 年 5 月 20 日]

当前工作的PHP

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
function clean_input($data){
    $data = trim($data);
    $data = strip_tags($data);
    return $data;
};
// clean user input
function clean_input_all($data){
    $data = trim($data);
    $data = stripslashes($data);
    $data = strip_tags($data);
    $data = htmlspecialchars($data);
    return $data;
};
$instaLink = clean_input_all( $_GET['instaLink'] );

if( !empty($instaLink) ){
    header('Content-Type: application/json; charset=utf-8');
    $response = clean_input( @ file_get_contents($instaLink) );
    $response_length = strlen($response);
    $start_position = strpos( $response ,'window._sharedData = ' ); // the start position
    $start_positionlength = strlen('window._sharedData = '); // string length to trim before
    $trimmed = trim( substr($response, ( $start_position + $start_positionlength ) ) ); // trim extra spaces and carriage returns
    $jsondata = substr( $trimmed, 0, -1); // remove extra ";" added at the end of the javascript variable 
    $jsondata = explode('window.__initialDataLoaded', $jsondata);
    echo substr(trim($jsondata[0]), 0, -1);
} elseif( empty($instaLink) ) {
    die(); //only accepts instaLink as parameter
}
?>
于 2014-08-18T00:05:38.913 回答
0

我不是 jQuery 专家。撇开语法错误不谈,这有什么用吗?

var publicUrl = "http://instagram.com/p/dAu7UPgvn0"; //photo
var publicUrl = "http://instagram.com/p/mOFsFhAp4f"; //video


var URL = "http://api.instagram.com/oembed?url="+publicUrl;

$(document).ready(function () {
    $.ajax({
        url: URL,
        publicurl: publicUrl,
        dataType: "jsonp",
        cache: false,
        success: function (response) {
            success: function (response) {
                var mediaSrc;
                if (response.type === 'photo') {
                    mediaSrc = response.url;
                } else {
                    mediaSrc = $(publicurl).find('div.Video vStatesHide Frame').src;
                }
                console.log(mediaSrc);
            }
        },
        error: function () {
            console.log("couldn't process the instagram url");
        }
    });
});
于 2014-07-06T06:46:42.757 回答