With the Prezi Player API, you can communicate with your embedded prezi on a website using JavaScript code. The API gives you lots of possibilities for more interactivity with your prezis.
An Application Programming Interface (API) is a set of programming instructions to access a specific application. A software company releases its API to give developers the opportunity to communicate with their software. This way, programmers don't have to start from scratch; they can use the functions already written by the software company. For example, an automatic Twitter plugin on your website is created by a developer by using the Twitter API.
The status of the Prezi Player API is alpha. Check prezi.github.io/prezi-player/ for the latest updates.
In this project, we'll be creating a menu on a website to navigate through our embedded prezi. We'll be using HTML and CSS for the menu and we'll be using JavaScript to create the interactivity.
The prezi we'll be using in this project is The world of bees from Project 3, I Want to Use Prezi For My Lessons. Using the menu, the user can jump straight to a specific item and he gets a good overview about the content of the prezi.
You can choose whether the user is also allowed to freely navigate the prezi with the mouse or if they should use the the navigation menu.
You'll find the project at www.prezihotshot.com, where you can try the navigation yourself. If you don't want to type the code yourself or if you're afraid of making typos you can right click the webpage, select View Source and copy the code.
The following screenshot shows the overview of the prezi, which is also the starting point when you view the webpage:
Here, we clicked on the menu item Evolution to zoom into that specific subject automatically, as shown in the following screenshot:
Of course, Prezi itself is pretty cool, but if you can give the user more control over the prezi, that'll be brilliant!
Using a navigation menu to control a prezi is just an example of the possibilities of the Prezi Player API. The API provides functions for the following:
- Querying meta information, such as the title
- Querying actual information, such as 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 or next step, starting autoplay, and so on
The possibilities of using the API are nonlinear storytelling, a chat room to discuss a prezi, syncing a prezi with a video, and interaction with the outside world by using location, gestures or sound.
In this project, we'll create a menu to navigate through our prezi by using HTML, CSS, and JavaScript, a great application of the Prezi Player API and very useful.
The major tasks to complete this project are as follows:
- Embedding the prezi
- Creating the menu
- Making it work
- Creating a submenu
To complete this project, you don't really need knowledge about HTML, CSS, or JavaScript, but of course it helps a lot if you have it.
I'll try to explain this project as simply as possible, because most Prezi users are not used to HTML, CSS, or JavaScript. You could use a (What You See Is What You Get) WYSIWYG HTML editor such as Adobe Dreamweaver, but you can also use a simple text editor such as Notepad. If you use a WYSIWYG editor, you have to work in code view. If you don't like code at all, you better skip this project.
You can find all documentation about the Prezi Player API at prezi.github.io/prezi-player/. The status of this API is alpha, so your code may clash with an update. Join the Prezi Player API mailing list to stay up to date.
You can make an online reference in your JavaScript code by using the following code:
<script src="http://prezi.github.io/prezi- player/lib/PreziPlayer/prezi_player.js"></script>
You can also download the JavaScript library at prezi.github.io/prezi-player/getit.html.