CODEWITHSUNDEEP
youtube
bluesummers
bluesummers

Reputation: 12627

Get Youtube video storyboard using ID/URL

Every Youtube video has a storyboard. I'm not sure it is the right word but I'm referring to the thumbnails that appear when you hover over the timeline of the player. Examining the network tab in Chrome console, I saw it arrives as a single image of all the storyboard images concatenated

For example for this video this is the storyboard

I was wondering if there is a way to get the storyboard using the video URL / video ID?

Upvotes: 4

Views: 694

Answers (1)

350D
350D

Reputation: 11439

You can utilize Youtube iFrame Player API where storyboard url available (not documented) in player object right after player initialization and start playing OR just using player.seekTo(0). Look for playerInfo.storyboardFormat:

<script>
    function onPlayerStateChange(event) {
        if (event.target.playerInfo.storyboardFormat) {
            story_board_data = decodeURIComponent(event.target.playerInfo.storyboardFormat).split('|').map(function(el, n){
                return !n ? el : el.split('#');
            });
            event.target.destroy();
            document.getElementById('storyboard').src = story_board_data[0].replace('L$L/$N','L2/M0')+'&sigh='+story_board_data[3][7];
        }
    }
    function onPlayerReady(event) {
      event.target.mute();
      event.target.seekTo(0);
    }

    function onYouTubeIframeAPIReady() {
      var player = new YT.Player('player', {
          width: 1, height: 1,
          videoId: '7nN5g0bu7v4',
          events: {
              onReady: onPlayerReady,
              onStateChange: onPlayerStateChange,
          }
      });
    }
</script>

<div id="player"></div>
<img id="storyboard">
<script src="https://www.youtube.com/iframe_api"></script>

JSFiddle snippet works fine with iFrames, check it in action.

Upvotes: 0

Related Questions