Youtube playlist

Get Help
1

hi, I’m new to xibo so a first thank you to the people who are developing this!

I’m playing around getting my android screens to work, my idea is to show images on different times of the day but at night i want to have a youtube playlist playing.(or all clips from a user)

unfortunately this took me last night 6 hours but without results. Am i missing something simple? Can get a single video to autoplay with this method : Autoplay Embedded Youtube Videos
but a playlist or all user video’s… not working

downloading the clips wil not be an option because i plan on having a changing programme

2

You can try something like this:

HTML to Embed
<div id="player"></div>

HEAD content to Embed (including script tags)

<script>
  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: '1080',
      width: '1920',
     loadPlaylist:{
        playlist:['56R3hU-fWZY','O-ZblMfZpuw','l3w2MTXBebg'],
        index:parseInt(0),
        suggestedQuality:'default'
     },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    event.target.loadPlaylist(['56R3hU-fWZY','O-ZblMfZpuw','l3w2MTXBebg']);
  }
      function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
    }
</script>

So there are two places in which you need to enter videoIds (not the whole playlistId!) and you can also adjust suggestedQuality:, options are here https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality

It may take some time to load the videos and same as before it might not work on all android devices.

3

That’s so great! thank you!!

4

I have a question, in the last 3 lines there is:

function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}

this makes the LAST clip of the playlist loop instead of restarting at the first clip, do you have any suggestions how to make the playlist start over again and loop from the first clip?

(The preview in windows screens does loop from first clip but android tablets only loop last clip)

5

I wonder if it would loop whole playlist if you’d add the following listener to the script

  function onPlaylistEnded(event) {
      player.loadPlaylist('56R3hU-fWZY','O-ZblMfZpuw','l3w2MTXBebg');
}

that function would need to be added to events as well.

I don’t have time to test it now, but it should be executed when the playlist ends and in theory then start it from the first video in the playlist.

Youtube api on android devices can act odd sometimes :confused:

6

thanks, nope that stops the looping totally, indeed android is very odd.
\i think only option is to just copy paste the playlist x20 and let it run.

7

From what I understand from this code, it plays multiple videos in sequence.
Creating a playlist.

But what if I want to play a YouTube playlist? so that you skip to the next video automatically.?

8

technically argument syntax is for “creating” playlists with an array of videoIds ie what I did use there earlier, but failed to provide good way to loop it from the start, so that would be

<script>    

  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: '1080',
      width: '1920',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    event.target.loadPlaylist(['56R3hU-fWZY','O-ZblMfZpuw','l3w2MTXBebg']);
    event.target.setLoop(true);
  }
</script>

now to use Playlist ID with loadPlaylist(), you’re suppose to use object syntax ie

loadPlaylist({list:'PLQ-7WiWmOuK9ihqYG20uqClZWaM6CIDtf', listType: 'playlist'});

<script>    


  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: '1080',
      width: '1920',
      events: {
        'onReady': onPlayerReady
      }
    });
  }
  function onPlayerReady(event) {
    event.target.loadPlaylist({list:'PLQ-7WiWmOuK9ihqYG20uqClZWaM6CIDtf', listType: 'playlist'});
    event.target.setLoop(true);
  }
</script>

Examples added to the KB - Autoplay Embedded Youtube Videos

9

Great. This turned out to be very helpful. Thanks!