Wistia video player

High level use case

Play videos hosted on Wistia with the in a responsive plugin. Includes some basic playback options and exposes basic data about the playback state of the video.

Demo

Editor

Run mode page (Credentials: username/password)

Details

Wistia element

95% of the plugin is here. Display videos in this responsive element.

Inputs:

  • Video ID (text)

    • ID of the Wistia video you'd like to play. This is in the URL of videos uploaded to Wistia, or returned via API when a video is uploaded with the Wistia Upload API.

  • Autoplay (yes/no)

    • Autoplay on page load - doesn't seem to work very well, and Wistia states it will not work on mobile devices.

  • Controls (yes/no)

    • Display controls on the embedded video element. Disable to create your own buttons to control the video in Bubble. If more actions are needed (e,g, the ability to go fullscreen via a Bubble action) please reach out to Chris to request that feature, which should be fairly quick to implement.

  • Annotations (text/JSON) (optional)

    • Displays blocks of text/buttons in the top right corner. These buttons can include a link that will open in a new tab. Many annotations can be included, or none.

Sample Annotation JSON

Exposed states:

  • Playback state (text)

    • Can be Playing, Paused, Ended or Not started)

  • Playback time (number)

    • The timestamp that the video is currently at, updated roughly every 300ms)

  • Video ID (text)

    • ID of currently playing video

Upload videos

Using an API connector action, upload videos via Wistia. Depending on your use case, you may want to modify this API connector action and maintain it directly in your app.

Quick video walkthrough