API examples

This page contains an overview of examples, demonstrating the capabilities of the THEOplayer API and custom JavaScript. With these examples, we try to explain the fundamentals of how to use our API:

• Accessing player properties and using methods (e.g. currentTime, duration, ...) ,
• Hooking to events,
• Inserting DOM-elements (buttons, text, ...) in the UI
• ...

The examples are sorted per subject, and a link can re-appear if it also relates to another subject. New examples will be added from time to time, when new use cases arise, or when new developments happen.

If you are new to THEOplayer, please read our Getting Started on Web or our API pages.

Properties and methods

• http://demo.theoplayer.com/creating-bookmarks-with-js-css-theoplayer — Demonstrates how to use basic player properties and the play() method to create your own bookmarks, and load those settings into your active player.
• http://demo.theoplayer.com/keeping-track-of-currenttime-timeupdate — Demonstrates a use case of the currentTime, played and buffered properties.
• http://demo.theoplayer.com/adblock-detection — Demonstrates how to use ad block detection.
• http://demo.theoplayer.com/schedule-ad-example — Demonstrates how to schedule an advertisement.

Events

• http://demo.theoplayer.com/using-events-examples — Demonstrates how to listen to player events as playing and pause, and ad events as adbegin.
• http://demo.theoplayer.com/keeping-track-of-currenttime-timeupdate — Demonstrates a use case of the timeupdate and loadeddata event.
• http://demo.theoplayer.com/implementing-continuous-play-with-js-cookies-theoplayer — Demonstrates how to save the playhead position and restore it, using cookies.
• http://demo.theoplayer.com/adblock-detection — Demonstrates how to use ad block detection.

UI

• http://demo.theoplayer.com/adding-buttons-text-overlay-to-theoplayer — Demonstrates how to insert a button in the control bar, overlay a container and overlay text.
• http://demo.theoplayer.com/changing-default-player-ui-css — Demonstrates how to change some elements (e.g. re-color progress bar, change control bar icon) of the default UI.
• http://demo.theoplayer.com/chromeless-ui-js-html-css — Demonstrates how to create a minimal chromeless UI.
• http://demo.theoplayer.com/timejump-buttons - Demonstrates how to insert buttons which can jump back/forth in time.
• http://demo.theoplayer.com/language-localization - Demonstrates how to configure language localization.
• http://demo.theoplayer.com/custom-center-controlbar - Demonstrates how to create custom centered control bar
• http://demo.theoplayer.com/fullscreen-social-controlbar - Demonstrates how to create a custom social control bar which is only visible when the player is in fullscreen mode
• http://demo.theoplayer.com/playlist-and-caching - Demonstrates how to build a playlist which can preload upcoming content
• http://demo.theoplayer.com/player-background-image - Demonstrates how to set a background image for the player
• http://demo.theoplayer.com/using-custom-error-messages - Demonstrates how to display custom error messages