javascript youtube api 获取当前视频标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22726941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
youtube api get current video title
提问by user3450928
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.
我有一个 chromeless Youtube iframe api 播放器，可以播放一个混排的 Youtube 播放列表。一切正常，但我想在播放器下方的 div 中显示当前正在播放的视频的标题，但我不知道如何执行此操作任何帮助将不胜感激。
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.
我已经尝试过来自 stackoverflow 的其他示例，但它们用于内嵌播放列表，对于包含 100 多个视频的 youtube 播放列表来说是不切实际的，而且我的脚本知识非常有限，无论如何我从来没有让它们工作，而且 google api 网站似乎没有涵盖我正在寻找的内容。我尝试了获取标题的 jwplayer，但随机播放功能很差，并且一遍又一遍地播放相同的视频，有时一个视频会多次播放。我找到了一个解决随机播放问题的脚本，但我失去了获取标题功能。我决定坚持使用 youtube 并希望有人能帮助我。
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>
回答by Gsx
For the first video add this to onPlayerReady():
对于第一个视频，将此添加到 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():
并将其添加到 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>
回答by phoenixson
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;
}
}
