Video 带循环的Youtube播放器api

我正在努力使用youtube播放器api设置youtube视频的循环

问题是视频没有在循环下运行

这是我的密码

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', {
          height: '390',
          width: '640',

          playerVars: {
            'controls': 0,           
            'showinfo': 0,
            'rel': 0,
            'loop': 1

          },
          videoId: 'qzZuBWMnS08',
          events: {
            'onReady': onPlayerReady,
           // 'onStateChange': onPlayerStateChange
          }
        });
      }
function onPlayerReady(event) {
        //  event.target.setLoop(true);
        event.target.playVideo();
      }

循环：1似乎不起作用。还有任何方法可以从视频顶部删除共享和视频标题

提前感谢。

如中所述，您需要将参数设置为视频ID，以便循环正常工作

您可能希望参数隐藏标题等。

在您的onPlayerStateChange中尝试此操作，Youtube希望您以某种方式再次输入视频ID

onStateChange: function(e){
    var id = 'qzZuBWMnS08';

    if(e.data === YT.PlayerState.ENDED){
        player.loadVideoById(id);
    }
}

---

如果视频没有改变，你可以这样做

onStateChange:
职能（e）{
如果（e.data==YT.PlayerState.ENDED）{
player.playVideo（）；
}
}

---

这将防止不必要地重新加载视频

这是我在API IFrame视频循环中使用的。我注意到您必须包含“playlist:VIDEO_ID”参数。它是有效的。这是我的例子

//异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//用and替换“ytplayer”元素
//YouTube播放器的API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
高度：“390”，
宽度：“640”，
videoId:“视频ID”，
playerVars：{
播放列表：“视频\u ID”，
循环：1
}
});
}

我用它制作了一套超低音量的循环视频，用于播放视频。您可以通过将音量从2更改为0来静音

还要确保您的视频已添加到播放列表中。显然，这现在是个问题。并在代码的播放列表和视频id区域中使用视频id

我肯定我有额外的步骤或多余的步骤，因为我没有编码器

我只知道这样行得通

    <div id="player">
<script>
      // 2. 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);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '600',
          videoId: 'DrrH-YTvVVc',
          playerVars: {
          playlist: 'DrrH-YTvVVc',
          loop: 1      }       ,
   events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
           event.target.setVolume(2);
       event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = true;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
    //      setTimeout(stopVideo, 6000);
                  player.playVideo();
        }
           event.target.setVolume(2);
      }
</script></div>

// 2. 此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：'315'，
宽度：'600'，
videoId:'DrrH ytvvc'，
playerVars：{
播放列表：“DrrH YTVvc”，
循环：1}，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 4. 当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
事件.target.setVolume（2）；
event.target.playVideo（）；
}
// 5. 当播放器的状态改变时，API调用此函数。
//该功能指示播放视频时（状态=1），
//玩家应该玩六秒钟，然后停下来。
var done=true；
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.end）{
//设置超时（停止视频，6000）；
player.playVideo（）；
}
事件.target.setVolume（2）；
}

工作循环示例（02-2019）

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
宽度：“640”，
高度：'360'，
//1.视频识别码
videoId:'AfAwsdbj04I'，
playerVars:{
自动播放：1，
循环：1，
控件：0，
rel:0，
第一,，
//2.播放列表\u Id（不要忘记“PL”）
播放列表：“PLxWQS97ZR2-c2eqKxSHxEu7v462-qnYM”
},
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
事件.target.setVolume（80）；
event.target.playVideo（）；
//player.mute（）；
}
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.end）{
播放器。seekTo（0）；
player.playVideo（）；
}
}
函数stopVideo（）{
player.stopVideo（）；
}

自从html5播放器问世以来，我们只需右键单击视频=>在循环中播放即可

从脚本到视频结束时的重播：

document.getElementsByClassName('video-stream html5-main-video')[0].loop = true

在两个时间点之间循环1.66秒：

const video = document.getElementsByClassName('video-stream html5-main-video')[0]

/* Loop markers in seconds */
let start = 54.34, end = 56

/* Seek to time in seconds */
function seek(time){
  video.loop = true
  video.currentTime = time
  video.play()
}

/* Loop between start and end */
function loop(e){
  if (e.target.currentTime > end){
    seek(start)
  }
}

/* Will loop for 1.66s */
video.addEventListener("timeupdate", loop, false)

/* Seek to 54.34s */
seek(start)

/* Abort the loop */
// video.removeEventListener("timeupdate", loop, false)

/* New loop */
// start = 14; end = 15; seek(start)

---

此方法的问题是，它会将同一视频作为新视频再次加载。未加载此项。我现在无法检查，但这不是一个问题，因为浏览器应该缓存/加载上一次播放的视频吗？+1用于上述方法，因为它将立即播放视频，避免使用Great solution建议的“&playlist=video_ID”时出现快速闪烁的黑屏。仅供参考，您也可以像这样播放视频

e.target.playVideo（）

，使其更具动态性。如果出于某种原因（即使用外部模块），您无法访问变量YT及其属性YT.PlayerState.ENDED为（在编写本文时）0，那么您可以将其替换为0。您好，谢谢分享答案。一般来说，人们寻找的是解释，而不是代码。也许可以尝试扩展你的答案，了解一下你的建议为什么有效，或者他们一开始做错了什么。在Android上进行实验后，我发现只有在调用javascript时才有效

const video = document.getElementsByClassName('video-stream html5-main-video')[0]

/* Loop markers in seconds */
let start = 54.34, end = 56

/* Seek to time in seconds */
function seek(time){
  video.loop = true
  video.currentTime = time
  video.play()
}

/* Loop between start and end */
function loop(e){
  if (e.target.currentTime > end){
    seek(start)
  }
}

/* Will loop for 1.66s */
video.addEventListener("timeupdate", loop, false)

/* Seek to 54.34s */
seek(start)

/* Abort the loop */
// video.removeEventListener("timeupdate", loop, false)

/* New loop */
// start = 14; end = 15; seek(start)