Media Kit

Dave Fumberger

Media Kit

Media player controls to create customisable audio and video players.


  • Video Player. Includes ability to adjust saturation, brightness, hue, contrast.
  • Audio Player
  • Play / Pause Button
  • Progress Bar
  • Progress Circular
  • Time Label

Controls can be wired up to players via overrides:


Property Description
shouldPlay If video should be playing
loop If video should loop
muted If video should play muted
onPlay When video is playing
onPause When video is paused
onPlaying When video starts playing
onStalled If video stalls
onEnded When video ends
onTimeUpdate(currentTime, duration) When time updates
onProgress(percent) When progress of video changes
debug Logs to console when true


Property Description
shouldPlay If audio should be playing
onEnded When audio ends
onProgress(percent) When progress of audio changes
onTimeUpdate(currentTime, duration) When time updates
onPlay When audio is playing
onPause When audio is paused
onPlaying When audio starts playing
onStalled If audio stalls
onEnded When audio ends


Property Description
paused If button should appear play / paused
onPlay When user clicks to play
onPause When user clicks to pause


Property Description
progress 0 - 1 complete


Property Description
progress 0 - 1 complete


Property Description
seconds Number of seconds elapsed

Example Overrides

Example connecting play button.& progress bar to player:

const data = Data({ play: false,
                    progress: 0.0 })

export const isProgressBar: Override = () => {
    return {
        progress: data.progress

export const isPlayer: Override = () => {
    return {
        onProgress(progress) {
            data.progress = progress
        onEnded() {
   = false

export const isPlayButton: Override = () => {
    return {
        paused: == false,
        onPlay() {            
   = true
        onPause() {            
   = false


Any questions, contact me @djfumberger /

📣Also, if you’re looking for Framer X components or prototypes to be developed I’m available for work!


21 Aug 2019

  • Made time updated events fire as soon as metadata is available

19 Aug 2019

  • Added mute option

17 Jul 2019

  • Added additional events to the AudioPlayer

10 May 2019

  • Updated for latest Framer version
  • Updated documentation

3 Apr 2019

  • Added loop option to video
  • Added hue, contrast, saturation, brightness controls to video.

v1.0.0 - 12 Mar 2019

Initial Release