Welcome to the Panopto Community

Please note: All new registrants to the Panopto Community Forum must be approved by a forum moderator or admin. As such, if you navigate to a feature that is members-only, you may receive an error page if your registration has not yet been approved. We apologize for any inconvenience and are approving new members as quickly as possible.

Getting Video State from the EmbedAPI does not work

edited May 2021 in API

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

Tagged:

Answers

  • Hiroshi OhnoHiroshi Ohno Panopto Employee

    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.

Sign In or Register to comment.