问题

Question

问题

我正在使用Youtube Iframe API，我需要使用每个视频的API的startSeconds和endSeconds选项。

但是问题在于：loadVideoById函数会跳过视频。在我的示例代码中，仅播放第一，第三，第五视频。

这是代码。它只是我的应用程序的简化版本。

源代码

Database: None

源代码的简单说明

分配视频数组以供我自己测试。（这都是Faker的亮点，因为我是他的粉丝:)）

我让播放器播放列表中的视频。如果播放器发出“ENDED”事件，则更改索引并播放下一个视频。

但是，当要播放第二和第四视频时，不播放此视频。只有ENDED事件发生。

似乎加载的视频的endSeconds值不等于视频的总持续时间，它会跳过下一个视频。

我该如何解决这种情况？这是Youtube API的错误吗？

Answer 1

我添加了一个日志函数来查看调用了哪些状态，这似乎是API中的一个问题。当新视频加载状态为-1（未启动）时，紧接着是状态0（已结束）。

为了防止这种情况发生，我只是添加了额外的检查，以确保至少加载了一小部分视频。

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://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: '390',
          width: '640',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      var videos = [
        {
          vid: 'nbCqWMIT-Pk',
          startSeconds: 10,
          endSeconds: 15
        },
        {
          vid: 'sAoJGNF_laA',
          startSeconds: 10,
          endSeconds: 15
        },
        {
          vid: 'kF_23_XxaHQ',
          startSeconds: 10,
          endSeconds: 15
        },
        {
          vid: 'zxYp3I0Gyrg',
          startSeconds: 10,
          endSeconds: 15
        },
        {
          vid: 'U_gA99OQwO4',
          startSeconds: 10,
          endSeconds: 15
        }
      ];
      var index = 0;
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.cueVideoById({
          videoId: videos[index].vid,
          startSeconds: videos[index].startSeconds,
          endSeconds: videos[index].endSeconds
        });
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        console.log("State change: " + event.data + " for index: " + index);

        if (event.data === YT.PlayerState.ENDED && player.getVideoLoadedFraction() > 0) {
          console.log(index);
          if (index < videos.length - 1) {
            index++;
            event.target.loadVideoById({
              videoId: videos[index].vid,
              startSeconds: videos[index].startSeconds,
              endSeconds: videos[index].endSeconds
            });
          }
        }
      }

    </script>
  </body>
</html>

Answer 2

我发现你的问题是函数onPlayerStateChange()增量应该在最后（加载你的视频后）：

function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
          console.log(index);
          if (index < videos.length - 1) {

            event.target.loadVideoById({
              videoId: videos[index].vid,
              startSeconds: videos[index].startSeconds,
              endSeconds: videos[index].endSeconds
            });
            index++;
        }
    }
}

Answer 3

此代码有效，但第一个视频播放两次，最后一个视频不显示。您只需为onPlayerReady中的第一个视频增加索引，并将<=放入onPlayerStatechange。

function onPlayerReady(event) {
    event.target.cueVideoById({
        videoId: videos[index],
    });
    event.target.playVideo();
    if (index == 0){
        index++;
    }
}

// 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.
;
function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
        console.log(index);
        if (index <= videos.length - 1) {

            event.target.loadVideoById({
                videoId: videos[index],
            });
            index++;
        }
    }
}

Answer 4

extension NSMutableAttributedString {
// Adds attributes EVERY TIME the text to change appears
func addAttributes(_ attributes: [NSAttributedString.Key: NSObject], forText text: String) {
    var range = NSRange(location: 0, length: self.length)
    while (range.location != NSNotFound) {
        range = (self.string as NSString).range(of: text, options: [], range: range)
        if (range.location != NSNotFound) {
            self.addAttributes(attributes, range: NSRange(location: range.location, length: text.count))
            range = NSRange(location: range.location + range.length, length: self.string.count - (range.location + range.length))
        }
    }
}

Youtube iframe API loadVideoById（）会跳过视频

问题

源代码

源代码的简单说明

4 个答案: