This question is directed at the youtube guys, who I understand monitor stackoverflow youtube related tags; however, answers are welcomed by anyone who is youtube api (embedded iframe) savvy
The goal of the youtube player API JavaScript code I've written, is to have multiple players load in non-playing state (-1, or 5), when the page refreshes.
I don't expect other than 'enablejsapi:1', that the playervars are relevant to the question, but here they are anyway:
[everything that starts with 'current' is a variable that was set correctly in the set-up code before the player objects are instantiated (because the videos all load perfectly some of the time)]
window.ytPlayers[currentPlayerID] = new YT.Player(currentPlayerDivID, { height: 180, width: 360, host: "http://www.youtube.com", playerVars: { playsinline: 1, autoplay: 0, controls: 1, loop: 1, listType:'playlist', [currentPlaylistType]: currentPlaylist, disablekb: 0, rel:0, modestbranding:1, iv_load_policy:1, showinfo:0, enablejsapi:1, fs: 1, origin : window.location.host, widget_referrer : window.location.origin},events: { onReady: function(){window.onPlayerReady.call(window.ytPlayers[currentPlayerID]);}, onError: function(){window.ytPlayers[currentPlayerID].onPlayerError.call(window.ytPlayers[currentPlayerID], event);}, onStateChange: function(){ window.ytPlayers[currentPlayerID].onPlayerStateChange.call(window.ytPlayers[currentPlayerID], event); }}});The callback function code is just something that works for multiple instantiated youtube player objects with custom methods attached to them.
After initializing several youtube player objects, from the 'onYouTubeIframeAPIReady' function (or rather the function called from it), the code works fine.
The players load and run the onPlayerReady callback, but of course the videos come from different sources and have different buffering times, and errors and so on.
Since for these players, the playlists all contain either an array of several video IDs, or a single youtube playlist, and they are matched to their respective correct listTypes, either 'list' or 'playlist', the state I want the videos to end in, should look like this:
The number next to the drop-down menu is not relevant, except that it matches exactly the number of songs in the array of songs. It also of course gives the viewer the option of changing the song from a mobile phone. That's perfect.
Often however, without putting code in onPlayerReady, the players load with an error, or with a list of only 1 song, or directly in a pause state.
By list of only one song, I mean list of only one song when there is an array of many songs loaded to the player.
The image above, for example, there are 24 songs, but only 1 can be played from the player without refreshing the page (or selecting a button to reshuffle, cue, load, and play).
To find a more consistent onload player state (I am saying state, but I've found the state code does not match up to presence of a menu and properly loaded playlist, so I'm actually referring to the state of the drop-down menu. Can it be clicked? Does the number represent all the songs. Is the menu even there...etc).
My fix for this inconsistency was to put a condition in onPlayerReady that checks for listType then stops, cues, and loads the videos (using this.playVideoAt(0), which is relevant for lists that have been shuffled).
Stopping the videos, in onPlayerReady directly after shuffling, cueing and loading them causes again problems. Sometimes the drop-down menu is there with only 1 song, sometimes it is absent, sometimes the video is in a pause state.
Stopping the video after shuffling, cueing, and loading, from the onStateChange method, results in the same inconsistency. Stopping the video from onStateChange with a condition that stops only once the video reaches a play state (this time I mean 1),like this:
if(data == 1 && this.wasUnMuted == 0){//if the video has never been clicked always stop it when it starts to playthis.stopVideo();}Again, above results in inconsistent final loading state (the state of the menu), but it is much better, because it gives the players time to buffer, load their lists, before it stops them.
It seemed like more time was needed, (and still a lot of times, the videos do not reach a play state), so I dropped the conditional stop in 'onStateChange' and put a stop in a timer in the onPlayerReady function.
That works well, however again, it's not always that consistent.
And anyway, there are a lot of errors that do not result in a missing drop-down menu, or menu with only one song cued.
For those errors, I use naturally onPlayerError, onError, to reshuffle, recue, and reload the players, which ends in the same result, the dropdown menu is either present, missing, cued with only 1 song, or the video is endlessly buffering, or playing.
Next, to stop the timed condition and restart it on error. And now the code loads slowly. If there are three players, one of them will throw a few errors, which means shuffling, cueing, loading, and then stopping later, two times just for that video.
With three players, the players all together could shuffle, cue, and reload, and be stopped 6 or 7 times.
It's a lot of 'ungraceful' player activity.
So I need to know how to stop the players gracefully, or change up the videos, so that the ending state is always with a drop-down menu, and a loaded list.
Is there someway to control the presence of the drop-down menu?
Understandably, the players will start on error sometimes, based on the video settings at youtube, or speed of the internet at the client site, and those videos will be shuffled and cued, and loaded, again, but what is the best way to get them to the state where the drop-down menu is present and the full playlist is ready to be play once the viewer selects the play button?
Here is an example of the onError Code (it also has conditionals to check if the player has never been clicked, and the number of consecutive errors).
this.cancelCheckStopBuffering();this.checkStopBuffering(1500);this.changeVideoIds();this.cancelCheckStopBuffering() stops the setTimeOut() call by setTimeOut id (which is attached to the player object), starts it again, then reshuffles the playlist, cues it, and loads it (using this.playVideoAt(0) cases where the shuffling was done with the this.setShuffle();).
Is there a magic number after the video playlist shuffles, cues, and loads, which can be used to set the stop, so that it always ends in a video with a drop-down menu ready to select and play?
Is there something I'm missing about the ideal way to stop, cue, load, and then stop the videos?
Thanks
