QUICK START:
Place the ChapterOne element on your page.

Paste your link in Video URL (MP4, YouTube, or Vimeo).

Subtitles (Pro): Upload a .vtt file to Bubble. Paste the link in Subtitle URLs. The plugin handles security automatically!

Chapters (Pro): Create two lists of equal length: Chapter Titles (Text) and Chapter Times (Numbers in seconds).

Need to save progress? Use the workflow event "Time Update". Save the state ChapterOne's Current Time to your database.

Setting up ChapterOne Pro V2 is easier than ever. Follow these steps for the best experience:

Order of Operations: Place the element on your page and fill in the Video Source and Video URL first.

Subtitles & CORS: Our player handles CORS natively by converting your VTT links into secure Blobs. Just ensure your subtitle lists (URLs, Labels, Langs) have the exact same number of items.

The "Start At" Feature: Save the user's current time to your Bubble database using the Time Update event. Then, feed that saved number into the Start At field when the page loads to create a Netflix-style "Continue Watching" experience.

⚠️ Picture-in-Picture (PiP) Limitation: To use the new Toggle Picture-in-Picture action, your video must be a native HTML5 video (like an .mp4 file hosted on AWS, Bubble, or Mux). Browsers (Chrome/Safari) strictly block PiP for videos running inside iFrames, such as YouTube or Vimeo links, for security reasons.

How to upgrade to V3 safely:

Update the Plugin: Go to the Plugins tab in your Bubble editor and upgrade to Version 3.0.0. Refresh your editor.

The Dropdown is Gone: You will notice the old "Video Provider" dropdown is missing. Don't worry! Your existing videos will continue to work perfectly. Our new Smart Auto-Routing detects if the link is YouTube, Vimeo, MP4, or HLS automatically.

Using Adaptive Streaming (HLS): Simply paste an .m3u8 link into the video_url field. The player will automatically load the HLS engine and enable the Quality Selector (1080p, 720p, Auto) in the settings gear.

Using Audio Mode (is_audio): Check the new is_audio checkbox in the Core settings to turn the element into a Podcast/Music player.

📖 Field Description (For thumbnail_vtt_url)
Thumbnail VTT URL
Enter the absolute URL to your VTT sprite file to enable Netflix-style preview thumbnails when hovering over the progress bar. The VTT file must contain absolute HTTPS image paths (not relative paths) to avoid CORS errors. Leave this field blank to disable the feature.

⚠️ IMPORTANT LIMITATION: The Audio Mode is designed for direct audio files (e.g., .mp3, .wav). If you input a YouTube or Vimeo link while is_audio is checked, the plugin will intelligently ignore the audio toggle and render the standard video player to prevent the layout from breaking (YouTube/Vimeo do not allow pure audio extraction via their APIs).


1. How to Setup Pre-Roll Ads (Monetization):

In your ChapterOne element properties, locate the vast_ad_url field.

Paste your XML/VAST link (e.g., from Google Ad Manager or any VAST-compliant ad server).

The player handles everything automatically: fetching the ad, showing the "Skip" button, and resuming your main video!

Pro Tip: Use the new is_ad_playing state in your workflows or conditionals to hide custom Bubble UI overlays while the ad is running.

2. How to Enable Blob Masking (Security):

In the properties panel, simply check the box enable_blob_masking (set to "Yes").

Important Requirement: This feature works for direct HTML5 files (.mp4 / .webm). Ensure your file storage provider (like AWS S3, BunnyCDN, or Bubble's native storage) has CORS (Cross-Origin Resource Sharing) configured to allow your domain to read the file, otherwise the fetch will safely fallback to the standard visible URL.


How to Setup Smart Resume 💾
Simply pass a unique string to the Resume ID field (e.g., Current Page Video's Unique ID). The plugin will automatically save the user's progress every 3 seconds to their browser's local storage. When they reload the page, a native prompt will ask if they want to resume playback.
Want to force a restart? Use the Clear Video Memory workflow action!

How to Setup In-Video CTAs (Two Methods) 🎯
You can automatically pause the video at a specific second (using the CTA Time field) and show a dark, blurred overlay. You have two ways to add the button:

Method A (The Quick HTML Way): Paste raw HTML into the CTA HTML field.
Example: <button onclick="this.closest('.c1-cta-overlay').style.display='none'; document.querySelector('video').play();">Continue</button>.

Method B (The Bubble Native Way - Recommended!):
Leave the CTA HTML field empty. When the video hits the CTA Time, the player will pause and the screen will gracefully blur.
Build your own beautiful Bubble Group (with a transparent background) and place it over the video player. Create a Bubble Workflow: When 'Your Custom Bubble Button' is clicked -> Use the plugin action Close CTA Overlay. This action instantly removes the blur and resumes the video automatically!

Building a Secure "Next Lesson" Button 🎓
Don't rely on the "Video Ended" event (users can just skip to the end). Instead:

Place a disabled "Next Lesson" button on your Bubble page.

Create a workflow: When a ChapterOne Reached 90%.

Add an action to enable your button or mark the lesson as "Complete" in your database. Our highest_time_reached engine guarantees they actually watched the content to get there!