【问题标题】:Get video duration with YouTube Data API?使用 YouTube 数据 API 获取视频时长?
【发布时间】:2015-09-06 04:08:03
【问题描述】:

基本上,我试图获取搜索结果中显示的每个视频的视频时长。我为你准备了一个简洁的小演示!

另外 - 当我说持续时间时,我指的是 M/S 格式的视频长度 (0:00)..

演示 http://codepen.io/mistkaes/pen/6b6a347c7d24edee15b3491420db4ecd

jQuery:

var apikey = '<API KEY>';

$(function() {
    var searchField = $('#search-input');

    $('#search-form').submit(function(e) {
        e.preventDefault();
    });
});

function search() {
    $('#results').html('');

    q = $('#search-input').val();

    $.get(
        "https://www.googleapis.com/youtube/v3/search", {
            part: 'snippet, id',
            q: q,
            maxResults: 50,
            type: 'video',
            key: apikey
        },
        function(data) {
            $.each(data.items, function(i, item) {
                var output = getResults(item);

                $('#results').append(output);
            });
        });
}

function getResults(item) {
    var videoID = item.id.videoId;
    var title = item.snippet.title;
    var thumb = item.snippet.thumbnails.high.url;
    var channelTitle = item.snippet.channelTitle;

    var output = '<li>' +
        '<div class="list-left">' +
        '<img src="' + thumb + '">' +
        '</div>' +
        '<div class="list-right">' +
        '<h3><a href="http://youtube.com/embed/' + videoID + '?rel=0">' + title + '</a></h3>' +
        '<p class="cTitle">' + channelTitle + '</p>' +
        '</div>' +
        '</li>' +
        '<div class="clearfix"></div>' +
        '';

    return output;
}

【问题讨论】:

  • 请查看我的回答,希望对您有所帮助。
  • 顺便说一句,这真的很晚,但很重要。不要发布您的 API 密钥!这些是私人的。现在有人可以滥用您的配额了。

标签: jquery html css youtube youtube-data-api


【解决方案1】:

我搜索了您的查询,发现有一个带有搜索 api 的 issue

另一种方法是在进行搜索调用后调用Youtube Data API's 视频资源。您最多可以在搜索中添加 50 个视频 ID,因此您不必为每个元素调用它

我更新了您的codepen,我所做的如下:

1)获取您从搜索中获得的每个视频的网址。

2) 发送另一个 Ajax 调用以获取持续时间:-

for (var i = 0; i < data.items.length; i++) {
    var url1 = "https://www.googleapis.com/youtube/v3/videos?id=" + data.items[i].id.videoId + "&key=AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw&part=snippet,contentDetails";
    $.ajax({
        async: false,
        type: 'GET',
        url: url1,
        success: function(data) {
            if (data.items.length > 0) {
                var output = getResults(data.items[0]);
                $('#results').append(output);
            }
        }
    });
}

3) API 以 ISO 格式提供时间,因此我将其转换为 mm:ss 格式(如您所愿)。

function convert_time(duration) {
    var a = duration.match(/\d+/g);

    if (duration.indexOf('M') >= 0 && duration.indexOf('H') == -1 && duration.indexOf('S') == -1) {
        a = [0, a[0], 0];
    }

    if (duration.indexOf('H') >= 0 && duration.indexOf('M') == -1) {
        a = [a[0], 0, a[1]];
    }
    if (duration.indexOf('H') >= 0 && duration.indexOf('M') == -1 && duration.indexOf('S') == -1) {
        a = [a[0], 0, 0];
    }

    duration = 0;

    if (a.length == 3) {
        duration = duration + parseInt(a[0]) * 3600;
        duration = duration + parseInt(a[1]) * 60;
        duration = duration + parseInt(a[2]);
    }

    if (a.length == 2) {
        duration = duration + parseInt(a[0]) * 60;
        duration = duration + parseInt(a[1]);
    }

    if (a.length == 1) {
        duration = duration + parseInt(a[0]);
    }
    var h = Math.floor(duration / 3600);
    var m = Math.floor(duration % 3600 / 60);
    var s = Math.floor(duration % 3600 % 60);
    return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s);
}

4) 将结果附加到视频标题。

'<p class="cTitle">' + channelTitle + '  --->' + duration + '</p>'

【讨论】:

    猜你喜欢
    • 2018-06-28
    • 1970-01-01
    • 2011-11-14
    • 2015-12-07
    • 2013-03-13
    • 1970-01-01
    • 1970-01-01
    • 2013-09-20
    • 2015-10-17
    相关资源
    最近更新 更多