youtube api获取当前视频标题 [英] youtube api get current video title
问题描述
我有一个无聊的Youtube iframe api播放器，播放Youtube播放列表。
都能正常工作，但我希望在播放器下方的div
中显示当前正在播放的视频的标题，但我不知道如何做到这一点，任何帮助都将不胜感激。 / p>
我已经尝试了其他来自于stackoverflow的示例，但它们是用于内嵌播放列表的，并且对于具有100多个视频并且我非常有限的youtube播放列表而言是不实用的
脚本知识我从来没有让他们工作
和谷歌api网站似乎并不包括我在找什么。
我尝试了jwplayer，它可以获得标题，但是shuffle功能很差，并且一次又一次地播放相同的视频，有时甚至是一个视频。我发现了一个脚本来整理shuffle问题，但我放弃了get title
函数。我决定坚持youtube，希望有人能帮助我。
所以我再次感谢所有帮助。
这是我的
<！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：{$ b $'onReady'：onPlayerReady
}
}）;
var getRandom = function（min，max）{
return Math.random（）*（max - min）+ min;
`在这里输入代码`};
var playRandomTrack = function（）{
num = getRandom（0，99）;
player.playVideoAt（num）;
};
函数onPlayerReady（event）{
player.loadPlaylist（{'listType'：'playlist'，'list'：'PLmc_AnfxCB6t6Lwwgx3x5OxfNOWwHluU - '，'index'：'99'，'startSeconds '：'0'，'suggestedQuality'：'hd720'}）;
player.setShuffle（{'shufflePlaylist'：1}）;
}
< / script>
< / body>
< / html>
对于第一个视频，添加onPlayerReady（）：
var intId = setInterval（function（）{
//检查播放器是否被初始化并加载视频
if（player）{
// States：1：playing，2：paused，5：stopped
if（[1,2,5] .indexOf（player.getPlayerState（））> ; = 0）{
//将div的innerText设置为id =title给玩家title
document.getElementById（title）.innerText = player.getVideoData（）。title;
clearInterval（intId）;
}
}
}，100）;
并将其添加到playRandomTrack（）中：
//延迟循环，因为否则，player.getPlayerState（）仍然返回1，因为之前的视频尚未被卸载
setTimeout（function（）{
var intId如果（[1,2,5] .indexOf（player.getPlayerState（））> = 0）{
document.getElementById（title）.innerText = player.getVideoData（）。title;
clearInterval（intId）;
}
}，100）;
}，100）;
所以你的整个代码变成：
<！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
}，
事件：{
'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（{$ b $'listType'：'playlist'，
'list'：'PLmc_AnfxCB6t6Lwwgx3x5OxfNOWwHluU-'，
'index'：'99'，
'startSeconds'：'0'，
'suggestedQuality'：'hd720'
}）;
player.setShuffle（{
'shufflePlaylist'：1
}）;
var intId = setInterval（function（）{$ b $ if（player）{
if（[1,2,5] .indexOf（player.getPlayerState（））> = 0）{
document.getElementById（title）.innerText = player.getVideoData（）。title;
clearInterval（intId）;
}
}
}，100） ;
}
< / script>
< / body>
< / html>
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>
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>
这篇关于youtube api获取当前视频标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
