【问题标题】:YouTube IFRAME player: setting the next video?YouTube IFRAME 播放器:设置下一个视频?
【发布时间】:2017-02-10 14:25:43
【问题描述】:

如何设置当前视频结束后自动跟随的视频ID?

player.loadVideoById()player.cueVideoById 立即切换到有问题的视频。

【问题讨论】:

    标签: youtube youtube-iframe-api


    【解决方案1】:

    您可以使用下面的code 来实现相同的功能-

    <html>
    <script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var ScriptTag = document.getElementsByTagName('script')[0];
    ScriptTag.parentNode.insertBefore(tag, ScriptTag);
    
    var player; 
          function onYouTubeIframeAPIReady() {                      
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId : 'YtF6p_w-cSc',                 
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }      
            });
          }        
           function onPlayerReady(event) {                                        
           event.target.playVideo();
          }       
          function onPlayerStateChange(event) {   
            if (event.data == YT.PlayerState.ENDED) {   
               player.loadVideoById ('4MJRS-cLozU');
            }       
          }
    
    </script>
    <body>
      <div id="player"></div>  
     </body>
    </html>
    

    这里是Jsfiddle

    根据上面的代码youtube会自动播放first videoYtF6p_w-cSc,当当前视频结束时它会自动播放next video4MJRS-cLozU。希望这会对您有所帮助,并且您正在寻找相同的东西。另外,如果您有任何问题,请告诉我。

    谢谢..!

    【讨论】:

    • 谢谢,这正是我实现的,因为我在 YT-API 本身中没有找到任何东西。很好的答案!
    • @PPB 如何在下一个视频上自动开始。不是静态的。如果你也可以在这里看到我的例子。 ighomall.com/index.php?route=tmdvideo/…
    • @MujahidBhoraniya 我没有得到你的问题,你能解释一下吗?在示例视频中,一旦视频结束,它就会停止。
    • @PPB 我已经发送了我的网站 URL。这是来自 youtube 的链接。当视频播放结束时,它会加载所有相关的 youtube 视频。当您单击它们时,它会将您带出站点到 youtube 网站。我们能否让视频在 1 秒后停止并自动移至我们的下一个视频
    • @PPB。还是行不通。你可以通过 HTML 元素设置它
    猜你喜欢
    • 2019-04-06
    • 2014-01-22
    • 2015-12-12
    • 2015-04-11
    • 2015-09-25
    • 2018-10-12
    • 1970-01-01
    • 2023-03-23
    • 2014-05-01
    相关资源
    最近更新 更多