使用YouTube Data API点击缩略图时获取YouTube videoId

时间:2015-07-13 05:23:39

标签: jquery html css youtube-data-api

DEMO: http://codepen.io/mistkaes/pen/6b6a347c7d24edee15b3491420db4ecd?editors=011

所以,我有这个基本搜索功能正常工作的演示......但我要做的是当用户点击视频缩略图时,它会返回videoId(例如BFjgsvM2gZ0 [代码]在youtube.com/?watch=BFjgsvM2gZ0]之后。

我不想使用任何标签来实现这一点,顺便说一下只是纯粹的jQuery!

jQuery的:

     var apikey = 'AIzaSyDYwPzLevXauI-kTSVXTLroLyHEONuF9Rw';

        $(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>' + title + '</h3>' +
            '<p class="cTitle">' + channelTitle + '</p>' +
            '</div>' +
            '</li>' +
            '<div class="clearfix"></div>' +
            '';

        return output;

}

一如既往地感谢帮助我!

1 个答案:

答案 0 :(得分:1)

如果您需要获取videoID,可以在getResults中添加新变量:

var videoID = item.id.videoId;

然后将其粘贴到您的输出中。

示例1:提醒视频ID:http://jsfiddle.net/DmitriyBorisov/jf8402qk/

示例2:在空白窗口中打开YouTube视频:http://jsfiddle.net/DmitriyBorisov/jf8402qk/1/