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

YouTube embedded video using IFrame API can't play a perfect loop and re-buffers the video with each loop

本文关键字：循环 视频 新缓冲 缓冲 YouTube API IFrame 嵌入式 不能 使用 完美      更新时间：2023-09-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>

您是否尝试过，而不是设置循环，在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
}

下面的代码将播放一个完美的循环，而不需要每次缓冲视频。

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

相关文章：