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獲得當前視頻標題

回答

相關問題