JavaScript library for XML driven keyframes in HTML5 video.
It does work on mobile though is limited by the need to manually start the video before anything can happen.
Initialise
keyframeVideo = vkf.init({
wrapper: 'video-wrapper',
props: {
width: 320,
height: 240,
id: null,
srcs: {
mp4: 'http://dev.giantrobot.co.uk/basic.mp4',
ogg: 'http://dev.giantrobot.co.uk/basic.ogg'
},
attrs: {
muted: true
},
forceReload: true
},
keyframes: 'basic.xml'
});
To a keyframe by name
keyframeVideo.goToAndPlay('loop_name');
To a keyframe by name with additonal paramaters
keyframeVideo.goToAndPlay({
name:'loop_name',
onComplete: {
func:[
'pause', // pause, loop or stop
{
name: 'functionToCallOnComplete',
params: 'bar, foo',
scope: window
}
]
}
});
Within the XML the only scope options are internal or window. JS function can call any scope
- xml2json - XML to JSON Parser. Required for the conversion of the XML and available on bower.
- es6-promise - This is a polyfill of the ES6 Promise. Not strictly necessary but if you want it to work on IE or Safari you'll need this.
bower install html5videokeyframes -save
gulp
Uglifies the code and that's that
gulp build
Concats dependacies and the libaray into one easy to use minified file
- Improve this stunningly bad documentation
- Potentially find a way to check the whole video is loaded before doing anything