使用 YouTube 数据单击缩略图时获取 YouTube videoId API

Question

演示： http://codepen.io/mistkaes/pen/6b6a347c7d24edee15b3491420db4ecd?editors=011

所以，我有这个具有基本搜索功能的演示...但是我想做的是当用户单击视频的缩略图时，它将 return videoId ( ex. 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;

}

一如既往地感谢您帮助我！

Answer 1

如果需要获取videoID，可以在getResults中添加新的变量：

var videoID = item.id.videoId;

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

示例 1：警报视频 ID：http://jsfiddle.net/DmitriyBorisov/jf8402qk/

示例 2：在空白处打开 YouTube 视频 window：http://jsfiddle.net/DmitriyBorisov/jf8402qk/1/

使用 YouTube 数据单击缩略图时获取 YouTube videoId API

Get YouTube videoId when thumbnail is clicked with YouTube Data API

html

css

jquery

youtube-data-api