HLS Video Player

Demo to preview the plugin:

Introduction

The HLS Video Player plugin allows you to play streaming video in the .m3u8 format directly inside your Bubble app. .m3u8 files are playlist files encoded in UTF-8 and typically contain links to live or on-demand video streams. With this plugin, you can integrate live broadcasts or adaptive streaming content into your Bubble pages effortlessly.
Key Features

Prerequisites

Before using the plugin, ensure that:
  • A valid .m3u8 video stream URL
  • Stream hosted over HTTPS for best compatibility
  • Modern browser/device support (Safari natively, others via plugin)
  • HLS Video element added to your Bubble page
Image without caption

How to setup

Step 1 – Install the Plugin

Step 2 – Add the Plugin Element to Your Page

Step 3 – Add the Input and Button

Step 4 – Create a Custom State

Step 5 – Configure the Workflow

Step 6 – Bind to the Plugin Element

Plugin Element Properties

HLSvideo

Image without caption
Fields:
Title
Description
Type
Url
The HLS video source URL (usually ending in .m3u8) that the player will stream.
Text
Autoplay
Determines if the video should automatically start playing when loaded.
Checkbox (yes/no)
Controls
Enables or disables the built-in video controls (play, pause, volume, etc.).
Checkbox (yes/no)

Exposed states

Title
Description
Type
Error
Returns any error message encountered during video loading or playback (e.g., invalid URL, network failure, unsupported format). Useful for debugging and handling errors in workflows.
Text

Element Events

Title
Description
Error
Triggered when the video player encounters an error (e.g., invalid/missing URL, playback failure, or unsupported format). This event can be used to run workflows for error handling, such as showing an alert to the user.
Image without caption

Changelogs