Question

我目前正在使用Twitter API v1.1。

我正在显示特定用户的最新5条推文。 API使用包含实体对象的数据对象进行响应，该实体对象随后包含一个url数组，如下所示。

display_url:"youtube.com/watch?v=WtM3wP…"
expanded_url:"https://www.youtube.com/watch?v=WtM3wPVhkik"
url:"https://www.youtube.com/watch?v=WtM3wPVhkik"

我想在带有缩略图的时间轴中显示推文，或者从页面播放视频的选项。任何人都可以提出这样做的方法。我无法在SO上找到任何内容，或通过Google建议解决方案。

相关的twitter documentation can be found here。

如果有帮助，请参阅下面的代码：

get_tweets.php

<?php

require_once('twitter_proxy.php');

// Twitter OAuth Config options
$oauth_access_token = '********';
$oauth_access_token_secret = '********';
$consumer_key = '********';
$consumer_secret = '********';
$user_id = '********';
$screen_name = 'StackOverflow';
$count = 5;

$twitter_url = 'statuses/user_timeline.json';
$twitter_url .= '?user_id=' . $user_id;
$twitter_url .= '&screen_name=' . $screen_name;
$twitter_url .= '&count=' . $count;

// Create a Twitter Proxy object from our twitter_proxy.php class
$twitter_proxy = new TwitterProxy(
    $oauth_access_token,            // 'Access token' on https://apps.twitter.com
    $oauth_access_token_secret,     // 'Access token secret' on https://apps.twitter.com
    $consumer_key,                  // 'API key' on https://apps.twitter.com
    $consumer_secret,               // 'API secret' on https://apps.twitter.com
    $user_id,                       // User id (http://gettwitterid.com/)
    $screen_name,                   // Twitter handle
    $count                          // The number of tweets to pull out
);

// Invoke the get method to retrieve results via a cURL request
$tweets = $twitter_proxy->get($twitter_url);

echo $tweets;

?>

tweets.js

$(function(){

    $.ajax({
        url: 'get_tweets.php',
        type: 'GET',
        success: function(response) {

            console.log(response)

            if (typeof response.errors === 'undefined' || response.errors.length < 1) {

                var $tweets = $('<ul></ul>');
                $.each(response, function(i, obj) {
                    $tweets.append('<li>' + obj.text + '</li>');    
                });

                $('.tweets-container').html($tweets);

            } else {
                $('.tweets-container p:first').text('Response error');
            }
        },
        error: function(errors) {
            $('.tweets-container p:first').text('Request error');
        }
    });
});

请参阅下面的其中一个返回的对象

Answer 1

我最终搜索了您从谷歌使用的库，并找到了它，andyfitch/twitter-proxy。

只需在返回的对象内冲浪。首先检查它是否包含对象media然后返回缩略图。否则，显示嵌入视频。这背后的想法是因为你在Twitter上嵌入（youtube）视频的（旧？）方式是在你的推文上插入URL。所以我将缩略图设置为优先于视频嵌入。

$.each(response, function(i, obj) {

    var media = obj.entities.media, //media entities
        urls = obj.entities.urls, //url entities
        img, //for image
        thumb; //whether show url+image or iframe

        //Every media (photo?) found should has URL (on tweet)
        if (typeof media != 'undefined') {
            img = '<img src="' + media[0].media_url + '>';
            thumb = '<a href="' + urls[0].expanded_url + '>' + img + '</a>';
        } else {
            //If no media show embeded video
            if (typeof urls != 'undefined' && urls.length > 0) {
                 //see parseVideo() function
                 thumb = parseVideo(urls[0].expanded_url);
            }
        }

    //Show the image or iframe and tweet status
    $tweets.append('<li>' + thumb + obj.text + '</li>');
});

因为我们想要在没有找到媒体的情况下嵌入iframe。我们应该检测URL实体，无论它来自youtube还是vimeo（按照您的要求），因为两者都有不同的URL以嵌入视频。实施例

Youtube：http://www.youtube.com/embed/Abcd1234

Vimeo：http://player.vimeo.com/video/12345678

这可以通过正则表达式完成，我从这个answer找到了一个简单但很棒的函数。并修改了一下。

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+)?/);

    var src, opt;

    if (RegExp.$3.indexOf('youtu') > -1) {
        src = 'http://www.youtube.com/embed/',
        opt = 'allowfullscreen';
    } else if (RegExp.$3.indexOf('vimeo') > -1) {
        src = 'http://player.vimeo.com/video/',
        opt = 'webkitAllowFullScreen mozallowfullscreen allowFullScreen';
    }

    return '<iframe src="' + src + RegExp.$6 + '" frameborder="0" ' + opt + '></iframe>';
}

它返回带有可选参数的iframe。感谢Embed Responsively。

当然，它远离你所期待的。您应该调整HTML代码以显示每条推文。请参阅此代码段

$tweets.append('<li>' + thumb + obj.text + '</li>');

Twitter API 1.1显示视频

1 个答案: