Question

我有一个youtube api可以很好地获取和列出视频，当用户单击缩略图时，他会完美地自动显示视频，但是我想当第一个视频播放完后，列表中的下一个视频也会自动播放... 香港专业教育学院外观，并找到了很多东西在堆栈上，但没有找到我需要的代码：

// Searchbar Handler
$(function () {
  var searchField = $('#query');
  var icon = $('#search-btn');

  // Focus Event Handler
  $(searchField).on('focus', function () {
    $(this).animate({
      width: '100%' },
    400);
    $(icon).animate({
      right: '10px' },
    400);
  });

  // Blur Event Handler
  $(searchField).on('blur', function () {
    if (searchField.val() == '') {
      $(searchField).animate({
        width: '45%' },
      400, function () {});
      $(icon).animate({
        right: '360px' },
      400, function () {});
    }
  });

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

function search() {
  // Clear Results
  $('#results').html('');
  $('#buttons').html('');

  // Get Form Input
  q = $('#query').val();

  // Run GET Request on API********************************
  $.get(
  "https://www.googleapis.com/youtube/v3/search?maxResults=**", {
    part: 'snippet, id',
     q: q+'********',
     fs:1,
     hd:1,
    type: 'video',
    videoCategoryId :'***',
    key: 'your api key' },
  function (data) {
    var nextPageToken = data.nextPageToken;
    var prevPageToken = data.prevPageToken;

    // Log Data
    console.log(data);

    $.each(data.items, function (i, item) {
      // Get Output****
      var output = getOutput(item);

      // Display Results*****
      $('#results').append(output);
    });

    var buttons = getButtons(prevPageToken, nextPageToken);

    // Display Buttons
    $('#buttons').append(buttons);
  });

}



///////////////////////////////////////////////////////////////


// Next Page Function
function nextPage() {
  var token = $('#next-button').data('token');
  var q = $('#next-button').data('query');

  // Clear Results
  $('#results').html('');
  $('#buttons').html('');

  // Get Form Input
  q = $('#query').val();

  // Run GET Request on API
  $.get(
  "https://www.googleapis.com/youtube/v3/search?maxResults=***", {
    part: 'snippet, id',
      q: '***********',
     fs:1,
     hd:1,
    pageToken: token,
    type: 'video',
    videoCategoryId :   '*****',
    key: 'your api key' },
  function (data) {
    var nextPageToken = data.nextPageToken;
    var prevPageToken = data.prevPageToken;

    // Log Data
    console.log(data);

    $.each(data.items, function (i, item) {
      // Get Output

      var output = getOutput(item);

      // Display Results
      $('#results').append(output);
    });

    var buttons = getButtons(prevPageToken, nextPageToken);

    // Display Buttons
    $('#buttons').append(buttons);
  });


}


// Prev Page Function
function prevPage() {
  var token = $('#prev-button').data('token');
  var q = $('#prev-button').data('query');

  // Clear Results
  $('#results').html('');
  $('#buttons').html('');

  // Get Form Input
  q = $('#query').val();

  // Run GET Request on API
  $.get(
  "https://www.googleapis.com/youtube/v3/search?maxResults=***", {
   part: 'snippet, id',
      q: **********,
     fs:1,
     hd:1, 
    pageToken: token,
    type: 'video',
      videoCategoryId :   '*****',
    key: 'your api key' },
  function (data) {
    var nextPageToken = data.nextPageToken;
    var prevPageToken = data.prevPageToken;

    // Log Data
    console.log(data);

    $.each(data.items, function (i, item) {
      // Get Output
      var output = getOutput(item);

      // Display Results
      $('#results').append(output);
    });

    var buttons = getButtons(prevPageToken, nextPageToken);

    // Display Buttons
    $('#buttons').append(buttons);
  });


}



// Build Output**********************************************
function getOutput(item) {
  var videoId = item.id.videoId;
  var title = item.snippet.title.substring(0, 33);
  /*var description = item.snippet.description.substring(0, 20);*/
  var thumb = item.snippet.thumbnails.high.url;
  var channelTitle = item.snippet.channelTitle;
  var videoDate = item.snippet.publishedAt;

  // Build Output String**************************************
  var output = '<li>' +

  '<a  target="mainVid" href="https://www.youtube.com/embed/' + videoId + '/?autoplay=1&modestbranding=1&rel=0"><img src="' + thumb + '"></a>' +


  '<h3><a  target="mainVid" href="https://www.youtube.com/embed/' + videoId + '/?autoplay=1&modestbranding=1&rel=0">' + title + '</a></h3>' +

  '<p>'  + '</p>' +

  '</li>' +
  '<div class="clearfix"></div>' +
  '';

  return output;

}

// Build the buttons
function getButtons(prevPageToken, nextPageToken) {
  if (!prevPageToken) {
    var btnoutput = '<div class="button-container">' + '<button id="next-button" class="btn btn-primary" data-token="' + nextPageToken + '" data-query="' + q + '"' +
    'onclick="nextPage();">Page Suiv</button></div>';
  } else {
    var btnoutput = '<div class="button-container">' +
    '<button id="prev-button" class="btn btn-primary" data-token="' + prevPageToken + '" data-query="' + q + '"' +
    'onclick="prevPage();">Page Préc</button>' +
    '<button id="next-button" class="btn btn-primary" data-token="' + nextPageToken + '" data-query="' + q + '"' +
    'onclick="nextPage();">Page Suiv</button></div>';
  }

  return btnoutput;
}

我知道我需要一项活动，但我不愿意将其放置在何处

感谢您的帮助！对不起，我的英语只是法语！

Answer 1

请看这篇帖子Play next youtube src when the other one is finished，这里的解释是，您将需要使用youtube iFrame API（之前共享）来访问玩家事件。该帖子还在帖子How to detect when a youtube video finishes playing?中提及，这是2012年共享的一个有效示例。

我不会写Javascript或曾经用youtube API编写过某些东西，所以我无法给您一个有效的示例。但是我敢肯定，通过这些帖子和API文档，您可以找到所需的答案。

Answer 2

好的，大家好！

此处为带有花式框的解决方案：在链接上添加data-fancybox =“ video”以打开

并给出一些说明：

$('[data-fancybox]').fancybox({
  infobar: false,
  buttons: false,
  afterLoad: function (instance, current) {
    if (instance.group.length > 1 && current.$content) {
      current.$content.append('<a data-fancybox-next class="button-next" href="javascript:;">→</a><a data-fancybox-previous class="button-previous" href="javascript:;">←</a>');
    }

    current.$content.append('<a data-fancybox-close class="button-close" href="javascript:;">×</a>');
  } });
});

做得很好！!!!

感谢您的帮助...

YouTube API –下一个视频自动播放？

2 个答案: