Getting Video State from the EmbedAPI does not work

Jacob Bookler

Dear Panopto Team,

I am trying to use your Embed API. I need to read the currentTime the of the Video playing. The getCurrentTime function of the embedApi just returns this.currentTime. I unminified the embedApi and this is the code that seems to be responsible for setting embedAPI.currentTime:

      window.addEventListener(
                        "message",
                        function (e) {
                            try {
                                var o = e.data,
                                    n = JSON.parse(o);
                                if (n.source === PanoptoSource && (n.id === t.iframeId || "*" === n.id))
                                    switch (n.msg) {
                                        case "embedIframeReady":
                                            t.onIframeReady && t.onIframeReady();
                                            break;
                                        case "iframeError":
                                            t.onError && t.onError();
                                            break;
                                        case LoginShownMessage:
                                            t.onLoginShown && t.onLoginShown();
                                            break;
                                        case "iframeState":
                                            var i = n.data;
                                            (t.volume = i.volume),
                                                (t.isVideoMuted = i.isMuted),
                                                (t.currentTime = i.currentTime),
                                                (t.duration = i.duration),
                                                (t.speed = i.speed),
                                                (t.isPaused = i.isPaused),
                                                (t.isFinished = i.isFinished),
                                                (t.captionLanguages = i.captionLanguages),
                                                (t.selectedLanguage = i.selectedLanguage),
                                                (t.areCaptionsDisplayed = i.areCaptionsEnabled),
                                                "iframeStateUpdate" === i.trigger
                                                    ? (t.isReady || (t.onReady && t.onReady(), (t.isReady = !0)), t.onStateChange && t.onStateChange(t.getState()))
                                                    : "iframeSpeedUpdate" === i.trigger && t.onPlaybackRateChange && t.onPlaybackRateChange();
                                    }
                            } catch (e) {}
                        },

There are some problems with this code. First of all the messages send by the iframe have no n.id set. Therefore the if statement always returns false, since the n.id === "*" and n.id===t.iframeId conditions both evaluate to false.

Removing that check, i.e. replacing the if condition by

if (n.source === PanoptoSource)

also does not work. For some reason, as soon as I do that the speed of the video gets set to 2. Setting it back to 1 does not help. As soon as I start the video again, the speed it at 2. Even uncommenting the line `t.speed = i.speed` does not change this behaviour.

For reproducibility, this is the code I use to initialize the panopto-player.

  const embedApi = new EmbedApi("panopto-player", {
      width: "750",
      height: "422",
      //This is the URL of your Panopto site
      serverName: "...url...",
      sessionId: "...some-id...",
      videoParams: { // Optional parameters
      //interactivity parameter controls if the user sees table of contents, discussions, notes, & in-video search
          "interactivity": "none",
          "showtitle": "false"
      },
      events: {
          "onIframeReady": onPanoptoIframeReady,
          "onReady": onPanoptoVideoReady,
          "onStateChange": onPanoptoStateUpdate
      }
  });

Afterwards calling `embedApi.getCurrentTime` will return undefined (and same for all the other state checks like embedApi.getDuration etc.)

Hiroshi Ohno

Jacob,

Thank you for posting a question and I apologize the extreme delay of response here.

One of our developers looked at your question but he thinks that we need more information to address your issue.

Please open a support ticket through your organization's Panopto administrator and refer to this forum post.