Widget API
Developers can use player.js to control embeddable video and audio players. Please refer to player.js
Or, use Podbean Widget API below.
In order to access the JavaScript object which provides the Podbean Widget API, add this script to your html page.
This script exposes the PB Class to the global scope. It allows you to control the widget from the parent page (the page the widget is inserted into). PB constructer accepts the reference to the iframe element or its css selector.
var iframeElement = document.querySelector('iframe');
var widget1 = new PB(iframeElement);
var widget2 = new PB('#iframeElementID');
Methods
When you get the widget object, you'll have access to the following public methods:
| Method | Description |
|---|---|
| bind(eventName, listener) | adds a listener function for the specified eventName. See below for the list of possible event names. |
| unbind(eventName) | removes all listener functions previously added for the specified eventName. See below for the list of possible event names. |
| load(url, options) | reloads the iframe element with a new widget specified by the url. All previously added event listeners will continue working. options is an object which allows you to define all possible widget parameters as well as a callback function which will be executed as soon as new widget is ready. See below for detailed list of widget parameters. |
| play() | play start. |
| pause() | play pauses. |
| toggle() | toggles the player status(play/pause). |
| seekTo(milliseconds) | jumps to a certain position. |
| setVolume(volume) | sets the widget volume to a certain value in the range 0-100. |
| next() | skips to the next (only if the widget contains playlist). |
| prev() | skips to the previous (only if the widget contains playlist). |
| skip(index) | jumps to the index episode, starting from 0 (only if the widget contains playlist). |
Getter
The following methods are sorted out to a separate group called "getters" because they return a value and do not modify the state of the widget. Since communication between the parent page and the widget's iframe is implemented through window.postMessage, it's not possible to return the value synchronously. Because of this, every getter method accepts a callback function as a parameter which, when called, will be given the return value of the getter method.
| Method | Description |
|---|---|
| getVolume(callback) | returns the current volume, in the range of [0, 100]. |
| getDuration(callback) | returns current duration in seconds. |
| getPosition(callback) | returns current position in seconds. |
| getSources(callback) | returns the list of source objects. |
| getCurrentSource(callback) | returns current source object. |
| getCurrentSourceIndex(callback) | returns the index of current source. |
| isPaused(callback) | whether the widget is paused. |
Event Types
All possible event types fired by the widget are accessible by means of the PB.Widget.Events object. This object should be used when you want to add or remove a listener from an event. Event listener is executed in the context of widget object.
| Method | Fired when |
|---|---|
| PB.Widget.Events.READY | fired when the widget has loaded its data and is ready to accept external calls. |
| PB.Widget.Events.LOAD_PROGRESS | The user agent is fetching media data. |
| PB.Widget.Events.PLAY_PROGRESS | The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. |
| PB.Widget.Events.PLAY | Playback is ready to start after having been paused or delayed due to lack of media data. |
| PB.Widget.Events.PAUSE | The element has been paused. |
| PB.Widget.Events.FINISH | Playback has stopped because the end of the media resource was reached. |
| PB.Widget.Events.SEEK | When user seekd. |
Audio events (except PB.Widget.Events.READY) return an object containing the following properties:
relativePosition - relative current position of the current episode, in the range of [0,1]. loadProgress - the current value of the loading progress, in the range of [0,1]. currentPosition - the position of the current episode (in seconds).
Parameters
| Parameter | Allow value | Description |
|---|---|---|
| fonts | Browser support font family | Specifies the font for player |
| auto | 0 or 1 | Whether to start playing the widget after it’s loaded |
| download | 0 or 1 | Show/hide download button |
| share | 0 or 1 | Show/hide share button |
| rtl | 0 or 1 | Enable right-to-left text , default no. |
| skin | 1 ~ 13 | Player color |
Playground
Widget API Playground is a special page where you can view examples and see the results live on your screen.
