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

问题描述：

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

我很感谢您在这件事上的帮助。
谢谢，塔尔

代码：

<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函数。以下是一个代码示例：

    <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嵌入式视频自动循环无刷新屏幕

相关推荐