YouTube API --- 下一个视频自动播放？答案

【问题标题】：YouTube API --- next video autoplay?YouTube API --- 下一个视频自动播放？
【发布时间】：2023-03-23 09:13:01
【问题描述】：

我有一个用于获取和列出视频的 YouTube API，当用户点击缩略图时，他们会完美地自动播放视频，但我希望在第一个视频完成后，我列表中的下一个视频也会自动播放。

我查看了 Stack Overflow，但没有找到适合我需要的。代码如下：

// 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;
}

我知道我需要一个事件的函数，但我不知道是哪一个以及在哪里放置它。

【问题讨论】：

我很困惑，在第一句话中你说自动播放效果很好，但在下一句中，你说你要添加这个。
另外，您是否想让 API 在移动环境中工作？我正在阅读 API 文档，发现所有移动环境中的自动播放都有限制：developers.google.com/youtube/…
在移动环境下不能在电脑屏幕上正常工作
如果用户点击缩略图视频自动播放非常好，我的需求：在视频结束时下一个视频也自动播放（对不起，我的英语很糟糕哈哈）

标签： javascript youtube-api

【解决方案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 文档找到您正在寻找的答案。

【讨论】：

【解决方案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>');
  } });
});

工作得很好！！！！

感谢您的帮助...

【讨论】：