custom youtube playlist with custom start and end time

Question

I am trying to make a custom youtube playlist based on the example here.

However, the youtube player gets "jammed" and skips videos (in my case the middle video is skipped). The code is supposed to iterate through the arrays below and play one video at a time with each video having separate start/end times.

How would one go about making this work properly. (note that the code below needs to be uploaded to a website to work. Apparently from a local computer, it does not work) Here is the code I am using:

<html>
<body>

<div id="ytplayer"></div>


<script>// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var i = 0;
var videoId_arr = ['O57DyNMRGY8','-Yh2QGJBd2U','M7lc1UVf-VE'];
var startSeconds_arr = [41,26,17];
var endSeconds_arr = [50,40,30];

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;

var playerConfig = {
  height: '360',
  width: '640',
  videoId: videoId_arr[i],
  playerVars: {
    autoplay: 1, // Auto-play the video on load
    controls: 1, // Show pause/play buttons in player
    showinfo: 1, // Hide the video title
    modestbranding: 0, // Hide the Youtube Logo
    fs: 1, // Hide the full screen button
    cc_load_policy: 0, // Hide closed captions
    iv_load_policy: 3, // Hide the Video Annotations
    start: startSeconds_arr[i],
    end: endSeconds_arr[i],
    autohide: 0, // Hide video controls when playing
  },
  events: {
    'onStateChange': onStateChange
  }
};


function onYouTubePlayerAPIReady() {

  player = new YT.Player('ytplayer', playerConfig);
}

function onStateChange(state) {
  if (state.data === YT.PlayerState.ENDED) {
    i++;
    if(typeof videoId_arr[i] === 'undefined')
        return;

    player.loadVideoById({
      videoId: videoId_arr[i],
      startSeconds: startSeconds_arr[i],
      endSeconds: endSeconds_arr[i]
    });
  }
}

</script>
</body>
</html>

Kossi D. T. S. · Accepted Answer · 2019-01-21T12:55:17.903

3

I have tested your code and I figured out that the state is changing for some unknown reasons very quickly. The state has sometimes the value 0 which equals YT.PlayerState.ENDED although the video was not played.

You can see it by console logging state.data within the onStateChange function.

A small change fixed the problem:

function onStateChange(state) {
   var _video_url = state.target.getVideoUrl();
   var _video_id = _url.split('v=')[1];
   var _current_index = videoId_arr.indexOf(_video_id) +1; 

   console.log('State: ', _video_id, _current_index, state );

  // ensure that the video has been played
  if (state.data === YT.PlayerState.ENDED && player.getCurrentTime() >= endSeconds_arr[i]) {
    i++;
    if(typeof videoId_arr[i] === 'undefined'){
        i = 0; // rest the counter
        return;
    }
  }
}

For the code to run properly you should disable browser plugins like Video Resumer or similar - since they can change the state of a youtube video or resumes the videos from where you stopped them last

fiddle: https://jsfiddle.net/_kdts/Lx91ehdw/

edited Jan 21 '19 at 12:55

answered Jan 21 '19 at 10:26

Kossi D. T. S.

484
2
10

thanks. but does not work. stops after the first video. perhaps a fiddle would help – michael Jan 21 '19 at 11:40
@michael I have updated the code by changing `startSeconds_arr[i]` to `endSeconds_arr[i]` and adding a jsfiddle link – Kossi D. T. S. Jan 21 '19 at 12:24
would that state=0 be some sort of bug in youtube api? – michael Jan 21 '19 at 21:40
I not quite sure but yes it could be. It might also result from how the browser downloads/caches the data. – Kossi D. T. S. Jan 22 '19 at 07:29

score -1 · Answer 2 · answered Jan 01 '23 at 19:05

-1

I it possible to loop the videos? I was trying by changing i=1

    if(typeof videoId_arr[i] === 'undefined'){
    i = 1; // rest the counter
    return;
}

answered Jan 01 '23 at 19:05

user20906729

1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33537215) – Darren G Jan 01 '23 at 22:33
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 01 '23 at 22:42

custom youtube playlist with custom start and end time

2 Answers2