Javascript youtube api获取当前视频标题_Javascript_Html_Youtube Api

Javascript youtube api获取当前视频标题

javascript html youtube-api

Javascript youtube api获取当前视频标题,javascript,html,youtube-api,Javascript,Html,Youtube Api,我有一个无铬的Youtube iframe api播放器，可以播放洗牌后的Youtube播放列表。所有的作品都很好，但我想在一个div中显示当前正在播放的视频的标题在球员的下面，但我不知道如何做到这一点，任何帮助都将不胜感激 var tag = document.createElement( 'script' ); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElement

我有一个无铬的Youtube iframe api播放器，可以播放洗牌后的Youtube播放列表。所有的作品都很好，但我想在一个div中显示当前正在播放的视频的标题在球员的下面，但我不知道如何做到这一点，任何帮助都将不胜感激

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;
    }
}

我试过stackoverflow中的其他例子，但它们都是针对在线播放列表的，而且是不正确的对于一个有100多个视频的youtube播放列表，而且我的脚本知识非常有限，我从来没有让它们工作过而且谷歌api网站似乎没有涵盖我要找的内容。我尝试了jwplayer，它可以获得标题，但是洗牌功能很差，并且一遍又一遍地播放相同的视频有时一个视频会重复多次。我找到了一个解决洗牌问题的脚本，但我失去了标题功能。我决定坚持使用youtube，希望有人能帮助我

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;
    }
}

所以我再一次非常感谢你的帮助，谢谢。这就是我所拥有的

<!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>

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;
    }
}


var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
PlayerBars:{'rel'：0，'showinfo'：0，'autoplay'：1，'controls'：0}，
活动：{
“onReady”：onPlayerReady
}
});
}
var getRandom=函数（最小值、最大值）{
返回Math.random（）*（max-min）+min；
`在此处输入代码`}；
var playdrandomtrack=函数（）{
num=getRandom（0,99）；
playevideoat（num）；
};
函数onPlayerReady（事件）{
loadPlaylist（{'listType'：'playlist'，'list'：'PLmc_anfxcb6lwwgx3x5oxfnowwhluu-'，'index'：'99'，'startSeconds'：'0'，'suggestedQuality'：'hd720'}）；
player.setShuffle（{'shufflePlaylist'：1}）；
}

对于第一个视频，将其添加到onPlayerReady（）：

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;
    }
}

并将其添加到playRandomTrack（）：

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;
    }
}

因此，您的整个代码变成：

<!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>

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;
    }
}


var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
playerVars：{
“rel”：0，
“showinfo”：0，
“自动播放”：1，
“控件”：0
},
活动：{
“onReady”：onPlayerReady
}
} );
}
var getRandom=函数（最小值、最大值）{
返回Math.random（）*（max-min）+min；
};
var playdrandomtrack=函数（）{
num=getRandom（0,99）；
playevideoat（num）；
setTimeout（函数（）{
var intId=setInterval（函数（）{
如果（[1,2,5].indexOf（player.getPlayerState（））>=0）{
document.getElementById（“title”）.innerText=player.getVideoData（）.title；
净间隔（intId）；
}
}, 100 );
}, 100 );
};
函数onPlayerReady（事件）{
player.loadPlaylist（{
'列表类型'：'播放列表'，
“列表”：“PLmc_anfxcb6lwwgx3x5oxfnowwhluu-”，
“索引”：“99”，
“开始秒”：“0”，
“建议质量”：“hd720”
} );
游戏者.设定抽离（{
“shufflePlaylist”：1
} );
var intId=setInterval（函数（）{
如果（球员）{
如果（[1,2,5].indexOf（player.getPlayerState（））>=0）{
document.getElementById（“title”）.innerText=player.getVideoData（）.title；
净间隔（intId）；
}
}
}, 100 );
}

我发现上面的实现不适合我，所以我提出了我自己的版本，我认为它更优雅

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;
    }
}

喝彩，这正是我想要的。感谢您分享您的知识和快速反应。完整的例子是一个很好的触摸再次谢谢你。player.getVideoData（）正是我需要的。为什么没有记录？我想getVideoData（）没有文档记录，因为人们不应该使用它。它已于2017年11月13日被删除：/是的，我现在有一个破碎的网站，因为。。。。。你现在如何获得标题？

getVideoData

似乎又出现了，但没有记录。我同意这比原来的答案好得多，加上一些样式，看起来也很不错。谢谢分享