使用IFrame API的YouTube嵌入式视频无法播放完美的循环，并在每个循环中重新缓冲视频

Question

我正在尝试制作一个自动播放且完美的视频，因为我将其用作登录页面的背景。

我可以使用HTML5 <video>标记实现完美的循环，因为它会在下载时缓存视频。

我不想在我的服务器上托管视频，因此我切换到使用YouTube IFrame API嵌入，我得到了一切正常工作，除了YT没有缓存视频所以有几秒钟滞后每一个循环。

有没有办法在没有刷新的情况下使用YouTube API实现完美的循环播放？

这是我的代码 Codepen

<div id="js-video"></div>
<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('js-video', {
      height: '315',
      width: '560',
      videoId: 'CFgqg5B924U',
      playerVars: { 
        'rel': 0, 
        'showinfo': 0, 
        'autoplay': 1, 'loop': 1, 
        'controls': 0, 
        'playlist': 'CFgqg5B924U' 
      },
      events: {
        'onReady': onPlayerReady
      }

    });
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  }

</script>

Answer 1

你试过，而不是设置循环，在onPlayerReady函数中设置一个setInterval，例如每250毫秒..在setInterval中做一个简单的条件，如：

if(vidplayer.getCurrentTime() > vidplayer.getDuration()-500){
//if video is 500 ms before ending, do
vidplayer.seekTo(0);
//gets back to the start of video
}

Answer 2

以下代码将在没有每次缓冲视频的情况下播放完美的循环。

		
<script>
// 1. This code loads the IFrame Player API code asynchronously.
	var tag = document.createElement('script');
	
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	
	// 2. This function creates an <iframe> (and YouTube player)
	//    after the API code downloads.
	var restart_before = 500;//milisecenods
	var code_overhead=10;
	
	var player;
	var total_video_time;
	
	function onYouTubeIframeAPIReady() {
		player = new YT.Player('video-foreground', {
			height: '100%',
			width: '100%',
			playerVars: {
			rel:0,
			autoplay: 1,
			controls: 0,
			showinfo: 0,
			autohide: 1,
			modestbranding: 1,
			vq: 'hd1080'},
			videoId: '<?php echo $youtubevideoid;?>',
			events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
		});
	}

	// 3. The API will call this function when the video player is ready.
	function onPlayerReady(event) {
		event.target.playVideo();
		player.mute();
		
		total_video_time = (player.getDuration()*1000)-restart_before;
		setTimeout(checkvideopos, total_video_time);
	
	}

	var done = false;
	function onPlayerStateChange(event) {
	// player.seekTo(0);
	}
		  
	function checkvideopos()
	{
		// console.log("MIA\n");
		var curr_time = player.getCurrentTime();
		curr_time = curr_time * 1000;
		if(curr_time>=total_video_time)
		{
			player.seekTo(0);
			setTimeout(checkvideopos, total_video_time);
		}
		else
		{
			var new_time =  (total_video_time -  curr_time) - code_overhead;
			setTimeout(checkvideopos, new_time);
		}
	}
</script>