youtube api获得当前视频标题

我有一个无聊的Youtube iframe api播放器，播放Youtube播放列表。所有效果都不错，但我想在播放器下方的div 中显示当前正在播放的视频的标题，但我不知道如何做到这一点，任何帮助都将不胜感激。youtube api获得当前视频标题

我试图从计算器其他的例子，但他们对于在线播放列表，是impracticle 对于具有100 +视频YouTube播放列表和我的非常有限的脚本知识，我从来没有得到他们无论如何工作和谷歌API网站似乎并没有涵盖我要找的东西。我试过了jwplayer，它可以获得标题，但是随机播放功能很差，并且一次又一次地播放相同的视频，有时会再次播放一个视频。我发现了一个脚本，整理了洗牌问题，但我放弃了获得标题函数。我决定坚持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: { 
    '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>

来源

2014-03-29 user3450928

第一视频将其添加到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);

，这增加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);

所以你的整个代码变为：

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

来源

2014-03-29 12:40:17 Gsx

干杯，完美的作品，只是我想要它。 Thankyou分享您的知识和快速回复。和完整的例子再次感谢你的一个很好的触摸。 – user3450928

player.getVideoData（）正是我所需要的。为什么没有记录？ https://developers.google.com/youtube/js_api_reference – TheSean

我想getVideoData（）没有记录，因为人们不应该使用它。它已被删除昨天2017年11月13日：/ –

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

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

来源

2014-07-30 11:39:47 phoenixson

我同意这比原来的答案好得多，并且有一些造型看起来非常好。感谢分享 – user3450928

youtube api获得当前视频标题

回答

相关问题