Youtube API --- next video autoplay?

0
votes

I have a youtube api working for fetching and listing to video, when user clicks on thumnail he gets video autoplay perfectly, but i would like when the first video is finished, the next video from my list autoplay also.

I've looked on StackOverflow but haven't found one that fits my needs. Here is the code :

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

i know i need a fonction on a event but i dont wich one and where to place it

thank for your help ! and sorry for my english im just french !

2
javascriptyoutube-api
I'm confused, in the first sentence you say that autoplay works perfectly, but in the next sentence, you said that you would like to add this. – wes
Also, are you trying to get the API to work in a mobile environment? I'm reading through the API docs and see that there is a restriction on autoplay in all mobile environments: developers.google.com/youtube/… – wes
not on mobile environement work well on pc screen – Eyal Krief Fr
if user clic on thumnail video autoplaying very well, my needs : at the end of the video the next video autoplay also(sorry for confusing, my english is bad lol ) – Eyal Krief Fr

2 Answers

0
votes

have a look at this post Play next youtube src when the other one is finished Here is explained that you will need to use the youtube iFrame API (shared earlier) to be able to access the player events. This post also mentions in the post How to detect when a youtube video finishes playing? Here is a working example shared from 2012.

I don't write Javascript or have ever written something with the youtube API so I cannot give you a working example. But I'm sure with these posts and API docs you can find the answer you are seeking.

0
votes

ok hi everyone !!!

here the solution with fancy box : add data-fancybox="video" on link to open

and give some instructions :

$('[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>');
  } });
});

work very fine !!!!

thank for your help ...