Video/Audio Player/Recorder (native)
A true native video and audio player and recorder for mobile apps, driven by the device's own media engine rather than a web view, so playback is smooth, memory light and battery friendly. The same player on both iOS and Android, with a fully custom control bar, frame accurate seeking, scrubbing thumbnails, subtitles, in-video advertisements, on-device frame capture, audio visualisations, and a camera recorder that hands finished recordings straight back to the player.
This is a real native player, not a video tag wrapped in a mobile shell. Everything that happens during playback comes straight back to your workflows as typed states: the current time in seconds and milliseconds, the current frame, buffering, volume, playback speed, fullscreen, subtitle and audio tracks, and every error. If you have been waiting for a serious video experience in Bubble, one you can actually build an interface around, this is it.
THE PLAYER:
- Native playback on iOS and Android (through expo-video), for video and audio alike.
- Plays MP4, MOV, M4V and more, plus HLS (.m3u8) streams, which are flagged automatically so their embedded tracks are detected properly on iOS.
- Autoplay, loop, start muted, default volume and default playback speed.
- Fade audio in on play and out on pause, for a smoother feel than an abrupt cut.
- Content fit (contain, cover or fill), poster images, and a buffering spinner.
- Native controls when you want them, or switch them off entirely and drive everything yourself.
- The element sizes itself to the media's own aspect ratio, so it never renders as a stray tall box.
CUSTOM INTERFACE:
- A complete built-in control bar you can shape: progress, play, current time, remaining time, fullscreen, subtitles button, timeline strip and buffer percentage, each shown or hidden independently.
- Every colour is yours: accent, track, buffer, text and bar, with corner radius and margins.
- Auto-hide that fades the bar away while playing, and a tap of the video hides it instantly rather than waiting.
- Drag to scrub with a live time tooltip, and a timeline strip showing the trimmed section with draggable handles.
TRIM AND OFFSETS:
- Set start and end offset times so the player treats a section of a longer file as the whole thing.
- Playback, looping, the progress bar and the timeline all respect the trim.
- Clear the offsets at any time to return to the full media.
FRAME ACCURATE WORK:
- Set your footage's frames per second and read the current frame back live.
- Seek to a frame, or step a single frame forward or backward.
- Exact frame seeking for precision, or a looser tolerance for speed, whichever suits.
- A configurable time update interval, so scrubbers and counters track as closely as you need.
SCRUBBING THUMBNAILS:
- Show a thumbnail preview above the scrubber as the viewer drags, from a sprite sheet.
- A server-side Create sprite sheet action generates one from any video, in the cloud, since frame extraction cannot run on the device.
- Feed the results straight into the player's fields, or per video through the Load media action.
SUBTITLES AND AUDIO TRACKS:
- Use subtitle and audio tracks embedded in the media or listed in an HLS playlist.
- Load external .vtt and .srt subtitle files from a URL, which the plugin fetches, parses and draws itself, so you can caption a plain MP4 that has none.
- Loaded files appear in the same subtitle menu as embedded tracks, so viewers pick between them uniformly. Load several for different languages.
- A built-in CC menu, or build your own from the track list states and the Set subtitle track and Set audio track actions.
ADVERTISEMENTS:
- Play up to five of your own advertisement videos that interrupt the main video at times you choose.
- A pre-roll at zero, or mid-rolls at any point on the main video's own timeline.
- Ads fire only when playback naturally reaches the point, so seeking past one does not trigger it.
- A dedicated ad interface: an Advertisement label, a reduced control bar, a progress bar that cannot be scrubbed, remaining time, an optional Visit button that opens your link, and a Skip button governed by your own skippable, skip-after and countdown settings.
- Set the accent colour for the whole ad interface.
- A broken ad URL is skipped automatically and the main video resumes, so ads can never stop playback.
- Events for started, completed, skipped, tapped and all ads finished, so you can record impressions and clicks.
- Entirely self-contained. No ad network, no tracking service, no VAST tags.
FRAME CAPTURE:
- Capture a still of any frame on the device, with no cloud round trip, so it works with private videos too.
- Use it straight away as an image, or upload it to your Bubble storage and get the file URL back.
- Optional maximum width to keep file sizes sensible.
AUDIO VISUALISATIONS:
- When an audio file plays, replace the blank audio icon with an animated visualisation.
- Five styles: bars, equaliser, pulse, wave and dots.
- Pick one colour and the plugin works out five shades of it, so the animation has depth rather than looking flat.
- Appears only for audio, never for video, and can be switched off at any time.
THE RECORDER:
- A second element that records with the device's own camera and microphone, no web view involved.
- Video mode with a live camera preview, or Audio only mode with a live level meter instead of a picture.
- Start, stop, pause and resume, with a pause timeout that finishes the recording automatically if it is left paused.
- Swap between front and back cameras, torch, pinch to zoom, a starting zoom, and mirroring for the front camera.
- Video and audio quality settings, maximum duration and maximum file size caps.
- An optional countdown before recording begins.
- Its own custom interface, with record button, timer, swap, torch, fullscreen and level meter each shown or hidden independently, and your own accent, control and background colours.
- Capture a still frame from the live camera, the same way the player does from a video.
- Permissions are requested at the right moment, with events so you can show your own prompts.
RECORD, THEN PLAY:
- Upload a finished recording to your Bubble storage and get the file URL back.
- Upload automatically when recording stops, or run the action yourself when you are ready.
- Optionally save the recording to the device's camera roll as well.
- Feed the returned URL straight into a Player on the same page or another one, the two elements are built to pair.
DATA AND OUTPUT:
- Everything exposed as typed states that drop straight into your own interface: playing, paused, ended, current time, current frame, duration, buffered percent, volume, muted, speed, fullscreen, video dimensions, track lists, ad status and more.
- Events for every moment worth knowing about: ready, loaded, first frame, play, pause, ended, time changed, rate changed, volume changed, fullscreen entered and exited, errors, offsets set and cleared, subtitle and audio changed, frame ready, time cues and the full set of ad events.
- Set a time cue at any millisecond or frame and have an event fire when playback reaches it. Set several and they fire in turn.
- A debug log you can copy to the clipboard for troubleshooting.
PLEASE READ BEFORE BUYING:
- The recorder records to a file and then uploads it. It is not a live broadcast tool. Live streaming needs RTMP or WHIP, which mobile plugins cannot reach, so no plugin of this type can offer genuine live streaming.
- Audio visualisations are decorative. Mobile players do not give apps access to the raw audio data, so the animation moves in a lively way but does not match the beat.
- Scrubbing thumbnails need a sprite sheet, generated by the included server-side action or by your own tooling.
- iOS requires your app to explain why it uses the camera and microphone. That is an app-level setting owned by Bubble, not something a plugin can supply.
- Picture-in-Picture, orientation lock and keep-awake are not included, as they need build-time configuration that a plugin cannot set.
This plugin is an active, well-supported project that is added to over time, with more features already in the pipeline.
Any issues with it, please reach out to me and I will help resolve any problems asap.
The editor link along with the instructions/documentation, can be seen here:
https://bubble.io/page?id=paul-testing-4&app_type=mobilePaul