youtube api get current video title

2019-04-21 01:36发布

站内问答 / JavaScript
1500 2 6

I have a chromeless Youtube iframe api player that plays a Youtube playlist shuffled. all works well but I would like to display the title of the currently playing video in a div underneath the player but I don't have a clue how to do this any help would be much appreciated.

I have tried other examples from stackoverflow but they were for in-line playlists and was impracticle for a youtube playlist that has 100+ videos and with my very limited script knowledge I never got them to work anyway and the google api website does not seem to cover what i'm looking for. I tried the jwplayer which gets the titles but the shuffle function is poor and plays the same videos over and over again sometimes one video multiple times. I found a script that sorts out the shuffle problem but I loose the get title function. I've decided to stick with youtube and hope that someone can help me out.

So once again I would really appreciate any help with this thanks. This is what I have 

<!DOCTYPE html>
<html>
<body>

  <div id="player"></div>

    <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 onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    playerVars : { 'rel' : 0,  'showinfo' :0, 'autoplay': 1, 'controls': 0 },
    events: {
    'onReady': onPlayerReady 
    }
    });
    }

    var getRandom = function(min, max) {
    return Math.random() * (max - min) + min;
    `enter code here`};


      var playRandomTrack = function() {
      num = getRandom(0, 99);
      player.playVideoAt(num);  
      };

  function onPlayerReady(event) {
  player.loadPlaylist({'listType': 'playlist', 'list': 'PLmc_AnfxCB6t6Lwwgx3x5OxfNOWwHluU-','index': '99','startSeconds': '0','suggestedQuality': 'hd720'});
  player.setShuffle({'shufflePlaylist' : 1});
  }

</script>

</body>
</html>

2条回答
聊天终结者
2楼-- · 2019-04-21 02:07

For the first video add this to onPlayerReady():

var intId = setInterval( function() {
    // Check if player is initialized and the video is loaded
    if ( player ) {
        // States: 1: playing, 2: paused, 5: stopped
        if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
            // Set the innerText of div with id="title" to player title
            document.getElementById( "title" ).innerText = player.getVideoData().title;
            clearInterval( intId );
        }
    }
}, 100 );

and add this to playRandomTrack():

// Delay the loop because otherwise player.getPlayerState() still returns 1 because the previous video is not unloaded yet
setTimeout( function() {
    var intId = setInterval( function() {
        if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
            document.getElementById( "title" ).innerText = player.getVideoData().title;
            clearInterval( intId );
        }
    }, 100 );
}, 100 );

So your whole code becomes: 

<!DOCTYPE html>
<html>
<body>

    <div id="player"></div>
    <div id="title"></div>
    <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 onYouTubeIframeAPIReady() {
            player = new YT.Player( 'player', {
                height: '390',
                width: '640',
                playerVars: {
                    'rel': 0,
                    'showinfo': 0,
                    'autoplay': 1,
                    'controls': 0
                },
                events: {
                    'onReady': onPlayerReady
                }
            } );
        }

        var getRandom = function( min, max ) {
            return Math.random() * ( max - min ) + min;
        };

        var playRandomTrack = function() {
            num = getRandom( 0, 99 );
            player.playVideoAt( num );
            setTimeout( function() {
                var intId = setInterval( function() {
                    if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
                        document.getElementById( "title" ).innerText = player.getVideoData().title;
                        clearInterval( intId );
                    }
                }, 100 );
            }, 100 );
        };

        function onPlayerReady( event ) {
            player.loadPlaylist( {
                'listType': 'playlist',
                'list': 'PLmc_AnfxCB6t6Lwwgx3x5OxfNOWwHluU-',
                'index': '99',
                'startSeconds': '0',
                'suggestedQuality': 'hd720'
            } );
            player.setShuffle( {
                'shufflePlaylist': 1
            } );
            var intId = setInterval( function() {
                if ( player ) {
                    if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
                        document.getElementById( "title" ).innerText = player.getVideoData().title;
                        clearInterval( intId );
                    }
                }
            }, 100 );
        }
    </script>

</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
3楼-- · 2019-04-21 02:07

I found the above implementation didn't work for me so I came up with my own version that I think is more elegant. 

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 onYouTubeIframeAPIReady() {
    player = new YT.Player( 'player', {
        height: '390',
        width: '640',
        playerVars: {
            'rel': 0,
            'showinfo': 0,
            'autoplay': 1,
            'loop': 1,
            'autohide': 1,
            'color': 'white',
            'theme': 'light',
            'controls': 1
        },
        events: {
            'onReady': onPlayerReady
        }
    } );
}

var num = (1 + Math.floor(Math.random() * 10));

function onPlayerReady( event ) {
    /*player.addEventListener('onStateChange', function(e) {
        console.log('State is:', e.data);
    });*/

    player.addEventListener('onStateChange', 'onPlayerStateChange');

    player.loadPlaylist( {
        'listType': 'playlist',
        'list': 'PLbfrQv4OD4BDMDrxuFv3uxwZeOKzkTkut',
        'index': num,
        'startSeconds': '0',
        'suggestedQuality': 'hd720'
    } );

    player.setShuffle( {
        'shufflePlaylist': 1
    } );
}

function onPlayerStateChange( event ) {
    console.log(player.getPlayerState()) 
    if (player.getPlayerState() == 1) {
    document.getElementById( "title" ).innerText = player.getVideoData().title;
    }
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)