Media Kit

Dave Fumberger

Media player controls to create customisable audio and video players.

Includes:

  • 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:

VideoPlayer

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

AudioPlayer

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

PlayPauseButton

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

ProgressBar

Property Description
progress 0 - 1 complete

ProgressCircle

Property Description
progress 0 - 1 complete

TimeLabel

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 {
        shouldPlay: data.play,
        onProgress(progress) {
            data.progress = progress
        },
        onEnded() {
            data.play = false
        }
    }
} 

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

Contact

Any questions, contact me @djfumberger / dave@fumberger.com

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

Log

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

Info

  • Version: 1.14.0
  • Updated: 4 days ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree