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

问题描述

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

I want to show a video which starts to run automatically and loops infinitely in my adobe portfolio website. I tried using YouTube embedded video with autoplay and loop options (see below code), however, every time the video ends there is a black refresh screen before it starts again which ruins the appearance of my website. The video format I'm using is .mp4. I know that with .gif file this problem can be solved, however, the video quality will not be sufficient. I tried downloading the video into the portfolio website directly, however, I couldn't make it loop or autoplay.

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

I would appreciate your help in this matter.
Thanks, 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>

推荐答案

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

After some research I've finally got it working, the solution is to use the API iframe embed code (https://developers.google.com/youtube/iframe_api_reference) and instead of using the loop parameter you make use of the onPlayerStateChange function. Here is a code example:

                  <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>

这篇关于YouTube嵌入式视频自动循环播放而没有刷新屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！