Question

背景

我有一段（jQuery）ajax代码，在过去几周左右的时间里，它已经快乐地工作了大约9个月。

此代码使用Instagram embedding endpoints，允许我从http://instagram.com/p/BUG/这样的普通Instagram链接中获取媒体源（图像或视频），无论用户是谁，不带< / strong>需要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会返回完整的媒体网址源，如：

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源而不管用户，因此不能使用media endpoints。

问题

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" }

您可能已经注意到，我的ajax代码对属性名称url特别感兴趣，该名称包含完整媒体的网址。

注意这个json响应（如今）仍然对Instagram图片有效，然而，如果原始Instagram的链接是视频，让我们使用一个真实示例：http://instagram.com/p/mOFsFhAp4f/（CocaCola（c））json响应不再返回任何url键。

似乎在web embeds Instagram推出后，我们已决定将url属性替换为html属性（仅限视频）json响应中的{ ... "html" : "\u003ciframe src=\"http:\/\/instagram.com\/p\/BUG\/embed\" width=\"616\" height=\"716\" frameborder=\"0\" scrolling=\"no\" allowtransparency=\"true\"\u003e\u003c\/iframe\u003e", ... }属性，其中包含iframe嵌入像：

response.url

...当然，由于access_token未定义，因此会破坏我的代码。

问题

如何在Instagram json响应更改后获取完整视频的网址？

不幸的是，我无法在Instagram的开发者网站上找到任何正确的文档或更改日志（他们有一个很好的API，但文档很差。）

请注意，问题是关于Instagram API（v1）嵌入端点而不是jQuery或ajax问题。

我正在寻找（一个未记录的）Instagram的API选项，端点，oembed或者其他（不需要{{1}}），它允许我检索到媒体的直接链接视频（优选json响应之后）优先于正常的Instagram链接，无论用户是谁......还是愿意考虑不太苛刻的解决方法。

Answer 1

这可能不是最佳或最佳答案，但我相信这会解决您现在的问题，所以您可能会认为这是一个解决方法：

感谢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 Fiddle Demo

适合我，但只在CocaCola视频上尝试过，没有在其他链接上试过。

Answer 2

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

@ ProllyGeek的answer提供了一个很好的解决方法来取消Instagram视频页面（当之无愧的赏金），但它依赖于 whateverorigin.org 第三方服务，这将很好地工作除非服务最终变得不可用。

由于我在生产环境中已经发生了最新的事情，我不得不寻找更可靠的替代方案，因此我决定使用php的 file_get_contents 来废弃自己的视频链接-hosted php module。

我基本上遵循@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;
};
?>

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

然后ajax从我的主页面调用php模块：

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/

这比仅删除视频的网址更有用，也可以用于图片。

新的 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");
    }
});

Answer 3

我不是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");
        }
    });
});

使用oembed端点获取Instagram的视频媒体源

背景

问题

问题

3 个答案: