Prezi Player API

Prezi Player API makes it possible to control an embedded Prezi through JavaScript code on a website. You can also move around a prezi and query some basic information.

As the API uses HTML5's window.postMessage, you'll need a modern web browser like a recent version of Firefox, Chrome, Safari, or Internet Explorer 8+, and a web server (opening a HTML file directly in the browser will not work) for playing with it and using it online.

The API cares about embedding prezis to the page and you can embed more than one into a webpage and control them independently.

The status of the API is alpha, currently we are looking for feedback. We are dedicated to support it, but we may be slow to fix bugs or implement new features. Also, your code may clash with an upgrade.

Community

Prezi Player API has a mailing list at Google Groups. Feel free to join, and ask any questions you may have.

Dependency

Our API is framework independent; just add the script and you're good to go.

Basic usage

Just load the library code in your HTML:

<script src="lib/PreziPlayer/prezi_player.js"></script>

Now you can embed a prezi through the following code, providing the id of the HTML element you want to embed in the prezi and an option set, containing the prezi ID and optional parameters:

var player = new PreziPlayer('prezi-player', {preziId: 'o1uclaxwhoow', width: 300, height: 200});

The preziId parameter

The current Prezi Player works only with online prezis, so you have to provide a valid prezi ID for a public online prezi.

E.g. if you have a prezi with a link https://prezi.com/o1uclaxwhoow/turn-on-the-poetry-by-presentacionesbiz/, the ID is o1uclaxwhoow.

Optional parameters

Currently we're supporting these basic parameters:

  • width: the width of the (iframe of the) prezi, default is 640 pixels
  • height: the height of the (iframe of the) prezi, default is 480 pixels
  • explorable: set this to true if you want to allow users to freely navigate the prezi with mouse
  • controls: set this to true if you want to show the progressbar and the next/previous buttons at the bottom
  • debug: set this to true if you want to see what messages are sent between your page and the embedded prezi

Things you can do

All prezis are build from objects and organized by presentation steps. Steps may have (fade-in) animation steps. The API provides functions for:

  • querying meta information, like the title
  • querying actual information, like the current step number or object ID
  • subscribing to changes in this information (callbacks)
  • moving around by jumping to an exact step or object, or moving to the previous, next step, starting autoPlay, and so on

API reference

.getStatus()

Returns the current status of the prezi as a string. Possible values:

  • PreziPlayer.STATUS_LOADING - the prezi and the player is loading, you cannot use the API yet
  • PreziPlayer.STATUS_READY - the player is ready, but the content is not fully loaded
  • PreziPlayer.STATUS_CONTENT_READY - the player is ready for the presentation

.getStepCount()

Returns the number of the path steps the prezi have.

.getAnimationCountOnSteps()

Returns an array with the number of fade-in animations on path steps the prezi have.

.getCurrentStep()

Returns the actual path step number of the prezi. The first step has a value of 0.

.getCurrentAnimationStep()

Returns the actual fade-in animation step on the current path step. The first animation step has a value of 0.

.getCurrentObject()

Returns the actual object id as a string of the prezi. You can use it for the player.toObject(object_id) call.

.getTitle()

Returns the title of the prezi as a string.

.flyToPreviousStep()

formerly .previousStep() deprecated

Moves the prezi to the previous path or animation step.

.flyToNextStep()

formerly .nextStep() deprecated

Moves the prezi to the next path or animation step. If the current step has animations the current step number may not change until all the animations has played.

.flyToStep(step_idx)

formerly .toStep() deprecated

Moves the prezi to the path step you provide as the first parameter.

.flyToObject(object_id)

formerly .toObject() deprecated

Moves the prezi to the object you provide as the first parameter.

.play(defaultDelayInMilliSec)

Starts autoplaying the prezi. If there is no audio or video on a step, it delays defaultDelayInMilliSec milliseconds on each.

.pause(defaultDelayInMilliSec)

Same as .play(), but it pauses if it is currently playing or starts the play if not.

.stop()

Stops autoplaying the prezi.

.isPlaying()

Returns true if the prezi is currently playing, false otherwise (paused or stopped).

.on(event, callback)

Adds a listener to a player event. Available events:

  • PreziPlayer.EVENT_CURRENT_STEP
    fires when prezi changes path step, callback = function({type:String=PreziPlayer.EVENTCURRENTSTEP, value:Number})
  • PreziPlayer.EVENT_CURRENT_ANIMATION_STEP fires when prezi changes animation step, callback = function({type:String=PreziPlayer.EVENTCURRENTANIMATION_STEP, value:Number})
  • PreziPlayer.EVENT_CURRENT_OBJECT
    fires when path step object changes, callback = function({type:String=PreziPlayer.EVENTCURRENTOBJECT, value:String})
  • PreziPlayer.EVENT_STATUS
    fires when prezi loading stasus changes, callback = function({type:String=PreziPlayer.EVENT_STATUS, value:String})
  • PreziPlayer.EVENT_PLAYING
    fires when prezi starts of stops playing, callback = function({type:String=PreziPlayer.EVENT_PLAYING, value:Boolean})
  • PreziPlayer.EVENT_IS_MOVING
    fires when prezi starts or stops movement between steps, callback = function({type:String=PreziPlayer.EVENTISMOVING, value:Boolean})

.off([event], [callback])

Removes one or more listeners from a player.

  • event: Removes listeners from the specified event only. If missing, removes all listeners.
  • callback: Removes the given listener. If missing, removes the all listeners from the event.

How does it work?

As we mentioned, the website you embed the prezi to and the prezi's iframe is communicating using window.postMessage. There is a very good documentation about it at Mozilla Developer Network: window.postMessage. In short, the two websites can post messages to each other and on the other side an event is triggered you can subscribe to.

By sending continuous information from the iframe to the website, all the information you would like to query about the prezi is available by synchronous function calls.

License

Licensed under the Revised BSD License

Copyright (c) 2013, Prezi.com

All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  • Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
  • Neither the name of the nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.