1. Drop it on the page Drag Video Player onto a mobile page and set video_url to a direct link to an MP4 or HLS file — the file itself, not a YouTube or Vimeo page. Add a poster_url as well: it is what the viewer sees before pressing play, and it is held through the first frame so the video never flashes black.

2. Give it a shape
aspect_ratio works out the height from the width the page gives it: 16:9 for normal video, 9:16 for vertical, 1:1 for square. Pick Fixed height if you would rather set player_height yourself.

3. Make it yours
Set accent_color to your brand colour — it paints the play button, its halo, the progress bar, the handle, the volume and the chapter marks at once — and corner_radius to match your app. There is one design and it is already tuned, so that is the whole styling step.

4. Add chapters (optional, and the best part)
Either fill chapters_text with one line per chapter:

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

or point chapter_times and chapter_titles at two lists from your database, in the same order. The timeline splits itself into segments and the chapter name appears over the video when each one starts.

5. Wire it to your workflows
The player's actions drive it from anywhere: Play, Pause, Toggle Play, Seek To, Skip, Set Volume, Set Muted, Set Speed, Load Video, Go To Chapter, Set Fullscreen. Its states report back: Current time, Duration, Progress percent, Current chapter title, Milestone reached and more.

Tips

• Continue where they left off: save Current time on the On pause event, and feed it back as start_at next time they open the lesson.
  
• Mark a lesson watched: use the On milestone event and read Milestone reached — it fires once each at 25, 50, 75 and 100 per cent, however much the viewer scrubs.
  
• Autoplay is blocked with sound on phones. Turn on start_muted alongside autoplay, and let the viewer unmute.
  
• Playlists: the Load Video action swaps the source and the poster without leaving the page. Use it on the On end event for "next lesson".
  
• Too many workflow runs? Raise time_update_interval. It controls both the On time update event and how often Current time is published.
  
• One player per page. The actions talk to the last one placed, so keep it to one.
  
• If something does not respond, tick debug_overlay: it shows which action arrived, with what value, whether it found the player, and the real resolution of your video file.
  

Testing
The browser preview runs React Native for Web, where the native video engine does not exist — it falls back to a plain video element, which is fine for checking layout, gestures and chapters. Test playback itself in BubbleGo or a build.

📄 Full documentation: https://wide-finch-c12.notion.site/Video-Player-Documentation-3d361f4cca3a80a395a1f7330885621f