動態更改YouTube上的視頻ID

我試圖用下面的代碼顯示沒有視頻的YouTube音頻，因此我正在更改視頻ID，但它一次又一次地播放相同的ID。動態更改YouTube上的視頻ID

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>About</title> 
     <script type="text/javascript"> 
      function val1(val) 
      { 

     document.getElementsByTagName("div")[0].setAttribute("data-video", val); 
          alert(val); 


      } 

     </script> 
    </head> 
    <body onload="val1('WKV_z36pVAk')"> 
    <h3 style="color:#0066dd">Hello</h3> 

    <center> 


    <div data-video="8IYzyTYucKQ" 
     data-autoplay="0" 
     data-loop="1" 
     id="youtube-audio"> 
    </div> 

    </center> 
    <button>change</button> 


    </body> 
    <script src="https://www.youtube.com/iframe_api"></script> 
    <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script> 
    </html>

來源

2017-08-08 VyTcdc

你在哪裏看到，你應該設置'數據 - 視頻「來改變當前正在播放的視頻？您應該進行API調用，例如：[loadVideoById]（https://developers.google.com/youtube/iframe_api_reference#loadVideoById） –

在dom後更改數據屬性時要小心：loaded;它變得混亂得很快。 https://stackoverflow.com/questions/17762906/cant-update-data-attribute-value –

請運行該程序並檢查。你會明白這個問題，該程序有YouTube視頻ID，我想改變另一個ID，但它不會改變。 – VyTcdc

不太清楚你正在努力創造什麼，但這可能會讓你走向正確的方向。

您可以使用此代碼

function reload(vidId){ <-- Added a parameter 
    var container = document.getElementById("youtube-audio"); 
    container.setAttribute("data-video", vidId); <-- Added line to change data-video 
    var content = container.innerHTML; 
    container.innerHTML= content; 
}

然後添加到您的HTML重新加載一種哈克的方式的特定元素

<button onclick="reload('8IYzyTYucKQ')">Reload</button> <-- Added the parameter to what the `data-video` should be changed

來源

2017-08-08 14:55:11

我會檢查謝謝 – VyTcdc

你好，在哪裏可以通過新的視頻ID請致電 – VyTcdc

它不能正常工作 – VyTcdc

動態更改YouTube上的視頻ID

回答

相關問題