javascript - Youtube api getDuration 方法返回相同的时间

问题描述

我使用 Youtube api 编写了这个脚本。它在指定的持续时间在视频上滑动一个覆盖框。

除了 player.getDuration():Number 方法外，一切都很顺利。它会一直返回相同的时间，并且不会随着视频的进行而继续前进。

下面是相关的代码。完整的代码在这里https://github.com/BennyThadikaran/videoOverlay

init 方法将 youtube Player obj 存储在 player 变量中，并使用 setInterval 每秒运行 activateOverlay。

activateOverlay 获取视频的当前运行时间并检查是否是激活覆盖的时间。

var vidPlugin = (function() {
  var data,
      player,

      activateOverlay = function() {
        // get the current time
        var t = player.getDuration(),
            keys = Object.keys(data);

        for (key in data) {
          if (data.hasOwnProperty(key)) {
            if (t >= data[key].start && t <= data[key].end) {
              showOverlay(key);
            }
          }
        }
        if (t >= data[key].end) {
          hideOverlay();
        }
      },

      init = function(youtubeObj, dataObj) {
        data = dataObj;
        player = youtubeObj;

        var wrapper = document.getElementById("wrapper");

        generateOverlay();

        wrapper.addEventListener("click", runModal);
      },

      handler = function(e) {
        if (e.data === 1) {
          // if playing run activateOverlay function every second
          int = setInterval(function() {
            activateOverlay();
          }, 1000);
          wrapper.className = "wrapper wrapper-hide";
        }

        if (e.data === 2) {
          // paused
          clearInterval(int);
          wrapper.className = "wrapper wrapper-show scale-up-hor-right";
        }
      };

      return {
        init: init,
        handler: handler
      }
}());

window.onload = function() {
  vidPlugin.init(player, {
    0:{
      Name: "Item 1",
      Image: "https://via.placeholder.com/45",
      Description: "ipsom Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      start: 1,
      end: 5
    },
    1:{
      Name: "Item 2",
      Image: "https://via.placeholder.com/45",
      Description: "ipsom Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
      start: 7,
      end: 11
    }
    }
  });
}

标签： javascriptyoutube-api

javascript - Youtube api getDuration 方法返回相同的时间

问题描述

解决方案

推荐阅读