生成YouTube自定义播放列表问题

时间:2017-08-08 08:44:55

标签: javascript jquery youtube-api

我想使用YouTube API从this tutorial构建自定义YouTube视频播放列表,但我在某个时刻陷入困境。 我基本上嵌入了client.js脚本并在加载时执行它的功能,之后我还嵌入了如教程中所述的YouTubePlayList.js文件。 这是我想要做的事情的小提琴。我确实在控制台中收到了YouTubePlayList对象,但它似乎没有提供任何正确的数据。我需要一个有关如何实现它的工作脚本示例或指导,并在我的客户端中呈现播放列表。在此先感谢,任何帮助表示赞赏!

JS:

<pre>

function YouTubePlayList (id, entries) {
    this.id = id; 
    this.entries = entries; 
    this.currently_playing = 0; 
    this.randomizer = false; 
}
var requestOptions = {
    playlistId: 'PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe',
    part: 'contentDetails, snippet',
    execute: function(response) {
        var entries = [];
        $.each(response.items, function(key, val){
            var entry = {};
            entry.video_id = val.snippet.resourceId.videoId;
            entry.image_src = val.snippet.thumbnails.medium.url;
            entry.title = val.snippet.title;
            entry.note = val.contentDetails.note;
            entries.push(entry);
        });
    }
};
window['PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe'] = new YouTubePlayList('PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe', 1);
console.log(window['PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe']);

</pre>

1 个答案:

答案 0 :(得分:2)

您可以访问Playlists: insert

这有助于您在频道中创建新的播放列表。该页面包含了一些可以帮助您入门的想法。还有一些例子如下面的.js代码。

// Define some variables used to remember state.
var playlistId, channelId;

// After the API loads, call a function to enable the playlist creation form.
function handleAPILoaded() {
  enableForm();
}

// Enable the form for creating a playlist.
function enableForm() {
  $('#playlist-button').attr('disabled', false);
}

// Create a private playlist.
function createPlaylist() {
  var request = gapi.client.youtube.playlists.insert({
    part: 'snippet,status',
    resource: {
      snippet: {
        title: 'Test Playlist',
        description: 'A private playlist created with the YouTube API'
      },
      status: {
        privacyStatus: 'private'
      }
    }
  });
  request.execute(function(response) {
    var result = response.result;
    if (result) {
      playlistId = result.id;
      $('#playlist-id').val(playlistId);
      $('#playlist-title').html(result.snippet.title);
      $('#playlist-description').html(result.snippet.description);
    } else {
      $('#status').html('Could not create playlist');
    }
  });
}

// Add a video ID specified in the form to the playlist.
function addVideoToPlaylist() {
  addToPlaylist($('#video-id').val());
}

// Add a video to a playlist. The "startPos" and "endPos" values let you
// start and stop the video at specific times when the video is played as
// part of the playlist. However, these values are not set in this example.
function addToPlaylist(id, startPos, endPos) {
  var details = {
    videoId: id,
    kind: 'youtube#video'
  }
  if (startPos != undefined) {
    details['startAt'] = startPos;
  }
  if (endPos != undefined) {
    details['endAt'] = endPos;
  }
  var request = gapi.client.youtube.playlistItems.insert({
    part: 'snippet',
    resource: {
      snippet: {
        playlistId: playlistId,
        resourceId: details
      }
    }
  });
  request.execute(function(response) {
    $('#status').html('<pre>' + JSON.stringify(response.result) + '</pre>');
  });
}

尝试探索YouTube Player API Reference for iframe Embeds

  

IFrame播放器API可让您在自己的视频播放器上嵌入YouTube视频播放器   网站并使用JavaScript控制播放器。

     

使用API​​的JavaScript功能,您可以为视频排队   回放;播放,暂停或停止这些视频;调整播放器音量;   或检索有关正在播放的视频的信息。你也可以添加   将响应某个玩家执行的事件侦听器   事件,例如玩家状态改变或视频回放质量   变化

     

本指南介绍了如何使用IFrame API。它确定了   API可以发送的不同类型的事件,并解释如何   编写事件监听器来响应这些事件。它还详细介绍了   您可以调用的不同JavaScript函数来控制视频   播放器以及可用于进一步的播放器参数   自定义播放器。