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

【问题标题】：YouTube embedded video using IFrame API can't play a perfect loop and re-buffers the video with each loop使用 IFrame API 的 YouTube 嵌入式视频无法播放完美的循环，并在每个循环中重新缓冲视频
【发布时间】：2017-01-04 19:40:26
【问题描述】：

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

我可以使用 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>

【问题讨论】：

标签： javascript video youtube youtube-iframe-api

【解决方案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
}

【讨论】：

【解决方案2】：

Following Code 将完美循环播放，无需每次都缓冲视频。

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

【讨论】：