YouTube嵌入式视频自动循环播放而没有刷新屏幕

Question

我想显示一个视频，该视频开始自动运行并在Adobe产品组合网站上无限循环。我尝试将YouTube嵌入式视频与自动播放和循环选项一起使用（请参见以下代码），但是，每次视频结束时，在重新开始播放前都会出现黑色刷新屏幕，这会破坏网站的外观。我使用的视频格式为.mp4。我知道使用.gif文件可以解决此问题，但是视频质量将不足。我尝试将视频直接下载到产品组合网站，但是无法使其循环播放或自动播放。

感谢您在此问题上的帮助。
谢谢，塔尔

代码：

<iframe width="1920" height="1080"
     src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&amp;controls=0&amp;showinfo=0" 
     frameborder="0" allowfullscreen> 
</iframe>

Answer 1

经过一些研究，我终于让它工作了，解决方案是使用 API iframe 嵌入代码 ( https://developers.google.com/youtube/iframe_api_reference ) 而不是使用循环参数，而是使用该onPlayerStateChange函数。这是一个代码示例：

                  <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', {
                            videoId: '<?php the_field('homepage_video_background_id'); ?>',
                            playerVars: {
                                modestbranding: 0,
                                autoplay: 1,
                                controls: 0,
                                showinfo: 0,
                                wmode: 'transparent',
                                branding: 0,
                                rel: 0,
                                autohide: 0,
                                origin: window.location.origin
                            },
                            events: {
                                'onReady': onPlayerReady,
                                'onStateChange': onPlayerStateChange
                            }
                          });
                        }
                        function onPlayerReady(event) {
                            event.target.playVideo();
                        }
                        function onPlayerStateChange(event) {
                            if (event.data === YT.PlayerState.ENDED) {
                                player.playVideo(); 
                            }
                        }
                    </script>

Answer 2

此方法在重新启动视频之前仍然会闪现瞬间黑屏。如果您需要更平滑的循环，请使用它；

'onStateChange': function (event) {
           var YTP=event.target;
           if(event.data===1){
                var remains=YTP.getDuration() - YTP.getCurrentTime();
                if(this.rewindTO)
                    clearTimeout(this.rewindTO);
                this.rewindTO=setTimeout(function(){
                     YTP.seekTo(0);
                 },(remains-0.1)*1000);
             }
 }