Javascript 我试图用新的视频id更改数据视频属性，但它没有更改_Javascript_Jquery_Iframe_Youtube Api_Youtube Javascript Api

Javascript 我试图用新的视频id更改数据视频属性，但它没有更改

javascript jquery iframe youtube-api

Javascript 我试图用新的视频id更改数据视频属性，但它没有更改,javascript,jquery,iframe,youtube-api,youtube-javascript-api,Javascript,Jquery,Iframe,Youtube Api,Youtube Javascript Api,我正在尝试将视频id8IYzyTYucKQ动态更改为WKV_z36pVAk，但未更改我认为下面的库只能在重新加载页面时工作，因此当我单击按钮时，新Id会更改，但视频会播放旧Id，当我再次加载视频时，Id会重置为默认Id <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>About</title>

我正在尝试将视频id

8IYzyTYucKQ

动态更改为

WKV_z36pVAk

，但未更改

我认为下面的库只能在重新加载页面时工作，因此当我单击按钮时，新Id会更改，但视频会播放旧Id，当我再次加载视频时，Id会重置为默认Id

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>About</title>
         <script type="text/javascript">
          function val1(val)
          {
        location.reload();
        document.getElementsByTagName("div")[0].setAttribute("data-video", val);
            //document.getElementById("youtube-audio").data-video=val;
            //document.getElementById("p1").innerHTML=val;
            alert(val);


          }

         </script>
    </head> 
    <body> 
    <h3 style="color:#0066dd">Hello</h3>

    <center>


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

    </center>
    <button onclick="val1('WKV_z36pVAk')">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>


关于
功能val1（val）
{
location.reload（）；
document.getElementsByTagName（“div”）[0].setAttribute（“数据视频”，val）；
//document.getElementById（“youtube音频”）.data video=val；
//document.getElementById（“p1”）.innerHTML=val；
警报（val）；
}
你好
改变

更改数据属性后，使用以下方法重新加载页面：

location.reload();

当页面刷新并再次就绪时，将属性返回默认值的内容

使用API的简单示例：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://www.youtube.com/iframe_api"></script>
  </head> 
  <body>
    <h3 style="color:#0066dd">Hello</h3>
    <button id="change_video">change</button>
    <div id="player"></div>

    <script>
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: 'M7lc1UVf-VE'
        });
      }

      $('#change_video').on('click', function(){
        player.loadVideoById('WKV_z36pVAk');
      })
    </script>

  </body>
</html>


你好
改变
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：'360'，
宽度：“640”，
videoId:'M7lc1UVf VE'
});
}
$（“#更改视频”）。在（'单击'，函数（）上{
player.loadVideoById（'WKV_z36pVAk'）；
})

希望这有帮助。

您使用jQuery库吗？是的，youtube库为什么使用location.reload（）？因为新的视频不仅播放了新的id更改，而且播放了旧的视频。我提出了一个问题，请查看链接：