Dave Fumberger
Media player controls to create customisable audio and video players.
Includes:
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 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
},
}
}
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!
21 Aug 2019
19 Aug 2019
17 Jul 2019
10 May 2019
3 Apr 2019
v1.0.0 - 12 Mar 2019
Initial Release