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