Question

我想在我的adobe投资组合网站上展示一个开始自动运行并无限循环的视频。我尝试使用带有自动播放和循环选项的YouTube嵌入式视频（请参阅下面的代码），但是，每次视频结束时都会有一个黑色刷新屏幕再次启动，这会破坏我网站的外观。我使用的视频格式为.mp4。我知道使用.gif文件可以解决这个问题，但视频质量还不够。我尝试直接将视频下载到投资组合网站，但是，我无法循环播放或自动播放。

感谢您对此事的帮助谢谢，Tal

代码：

<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

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

export class AppComponent {
  constructor(@Inject(DOCUMENT) doc: Document, @Inject(LOCALE_ID) locale: string, renderer: Renderer2) {
    renderer.setAttribute(doc.documentElement, 'lang', locale);
  }
}

Answer 3

我正在尝试自己解决这个问题。我当前正在使用 Adobe Portfolio 。

我们允许在“嵌入”框中添加代码吗？

YouTube嵌入式视频自动循环，无需刷新屏幕

3 个答案: