A video player for Bubble native mobile apps whose control layer is drawn by the plugin rather than by the phone: the same on iOS and Android, in your color, with chapters drawn into the timeline.

One element, 27 properties, 15 states, 10 events and 11 actions.

Quick start

1. Drag Video Player onto a mobile page.
2. Set video_url to a direct link to an MP4 or HLS (.m3u8) file.
3. Set poster_url to a cover image.
4. Set accent_color to your brand colour and aspect_ratio to 16:9.

That is a working player. Everything below is optional.

The URL must point at the file, not at a page. A YouTube or Vimeo link will not play.

Chapters

Chapters split the progress bar into segments, one per chapter, each filling as it plays. The chapter name appears over the video for a couple of seconds when a new one starts.

The quick way — one text field

Fill chapters_text, one chapter per line:

0:00 Introduction
1:45 Setting up
4:10 Common mistakes
12:30 Wrapping up

The time can be written as seconds (105), m:ss (1:45) or h:mm:ss (1:02:03). The separator between the time and the title can be a space, a pipe or a dash — 0:00 Intro, 0:00 | Intro and 0:00 - Intro are all read the same way. Lines can also be separated with ; instead of a line break. Chapters written out of order are sorted for you.

The database way — two list fields

Point chapter_times at a list of numbers (seconds) and chapter_titles at a list of texts, in the same order:

chapter_times   →  Search for Chapters:each item's start seconds
chapter_titles  →  Search for Chapters:each item's title