Panopto Embed Api Beta

The Panopto Embed Api Beta allows programatic control over Panopto's Embed player.

Requirements

To be able to use the Panopto Embed Api Beta the site that hosts the video must have the Api setting enabled for it to work. Please work with Panopto Support to make sure the given site has the setting enabled.

Example Code

<html>
    <script>
        var tag = document.createElement('script');

        tag.src = "https://developers.panopto.com/scripts/embedapi.min.js"
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var embedApi;

        function onPanoptoEmbedApiReady()
        {
            embedApi = new EmbedApi("player", {
                width: "750",
                height: "422",
                serverName: "mysite.panopto.com",
                sessionId: "5cc99c54-6d3d-40b0-ab23-ab4c016124e0",
                videoParams: { // Optional
                    "interactivity": "none",
                    "showtitle": "false"
                },
                events: {
                    "onIframeReady": onPanoptoIframeReady,
                    "onReady": onPanoptoVideoReady,
                    "onStateChange": onPanoptoStateUpdate
                }
            });
        }

        function onPanoptoIframeReady()
        {
            // The iframe is ready and the video is not yet loaded (on the splash screen)
            // Load video will begin playback
            embedApi.loadVideo();
        }

        function onPanoptoVideoReady()
        {
            // The video has successfully been loaded by onPanoptoIframeReady

            // Seek to 100s
            embedApi.seekTo(100);
        }

        function onPanoptoStateUpdate(state)
        {
            if (state === PlayerState.Playing)
            {
                console.log("The video is playing");
            }
        }
    </script>

    <div id="player"></div>
</html>

Events

onIframeReady
This event will be called once authentication is complete and the iframe is ready to load the video. A splash screen of the choosen video will be displayed in this state.
Note: If the video autoplays it may skip this state.
onReady
This event will be called once the video has completed loading, either by a call to loadVideo() or by the video loading automatically in autoplay.
onStateChange
Param: state -- type PlayerState
  • PlayerState.Ended
  • PlayerState.Playing
  • PlayerState.Paused
This event will be called when the video's state changes (Play/Pause/Stop/Ended).
onPlaybackRateChange
This event will be called when the video's playback speed is changed.
onLoginShown
This event will be called when the login page is shown (Note: If the user is already authenticated this will not fire).

Actions

getState()
Returns: PlayerState (enum)
  • PlayerState.Ended
  • PlayerState.Playing
  • PlayerState.Paused
getVolume()
Returns: Number (between 0 and 1)
isMuted()
Returns: Boolean
getCurrentTime()
Returns: Number (in seconds)
getPlaybackRate()
Returns: Number
getDuration()
Returns: Number (total length of video in seconds)
loadVideo()
Returns: void
Action: Loads the video when in splash screen (will fire onReady when complete)
playVideo()
Returns: void
pauseVideo()
Returns: void
Developer Note: If you would like to seek and pause, it is recommended that you call pauseVideo() BEFORE seekTo(x).

pauseVideo() will not succeed if the video is currently in a loading state (state will show as Paused), recommended to check the state of the video before attempting to pause to confirm if video is already in a paused state.
muteVideo()
Returns: void
unmuteVideo()
Returns: void
stopVideo()
Returns: void
Action: Different from pauseVideo(), will stop the video and put it back to 0 seconds
seekTo(position)
Returns: void
Action: Seeks to given position (in seconds)
setPlaybackRate(speed)
Returns: void
Action: Sets video to given speed (Ex: 2 for 2x speed)
setVolume(volume)
Returns: void
Action: Sets given volume (between 0 and 1)
enableCaptions(captionTrackIndex?)
Returns: void
Action: Enables captions, can optionally provide which caption track to enable
hasCaptions()
Returns: Boolean
getCaptionTracks()
Returns: string[]
Action: Get a list of caption languages
getSelectedCaptionTrack()
Returns: number
Action: Gets the index of the currently selected caption track
disableCaptions()
Returns: void
getVideoUrl()
Returns: string
Action: Get the link to watch the video on Panopto

Optional Paramaters

interactivity
Values: ["all", "search", "none"]
Interactivity controls the table of contents, rating system, comments, discussions and search functionality.
showtitle
Values: ["true", "false"]
Show the title of the video in the top left.
autohide
Values: ["true", "false"]
Autohide the player controls (if false the controls will never fade away).
offerviewer
Values: ["true", "false"]
Toggle visibility of the "Watch in Panopto" breakout button.
autoplay
Values: ["true", "false"]
Toggle if the player should autoplay or not (if able to, per browser rules).
showbrand
Values: ["true", "false"]
Toggle visibility of site branding logo in the bottom left of splash screen.
start
Values: [number (in seconds)]
Specify when the video should begin playback.
hideoverlay
Values: ["true", "false"]
Hides the Panopto overlay.