I have
videoIds[youtubeIDs] lined to play youtube videos in mysite which is working fine with the below code.
But when second video starts it lags 1-2 sec to load and the loading youtube icon shows up.
Is there any way to buffer the next video while playing the current video, which will reduce the loading time which results the next video starts instantaneously.
<div id="player"></div>
<script>
var youtubeIDs=["qdW21vNQB1E","EcVeqY2QuSI","UOV49oGr2pc"];
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.cuePlaylist(youtubeIDs,parseInt(0),15,'large');
event.target.playVideoAt(0);
}