weex-kdp extend for weex
npm install weex-plugin-kdp
weex plugin add weex-kdp
`$3
#### iOS:
`
pod 'WeexKdp'
`#### Android:
Add the following line to the dependencies list in the build.gradle file for the corresponding project.
`
compile '${groupId}:weexkdp:{$version}'
`
> Note: You need to specify the groupId and $version of the project.#### Web integration
`
npm install weexkdp
`API
Template
$3
Adds the weex-kdp plugin to the template. See Data: MediaEntry.
`html
`Calling methods
Use the sendNotification method to create custom notifications that instruct the player to perform an action, such as play, seek, or pause.
Example:
`js
this.$refs.kdp.sendNotification("doSeek", 30);
`$3
####
changeMediaEntry (ios)
Prepare for playing an entry. Play when it’s ready.
- (JSON) MediaEntry: see Data: MediaEntry.
`js
this.$refs.kdp.sendNotification('prepare', { / media entry /});
`####
doPlay (iOS)
Plays the video.
`js
this.$refs.kdp.sendNotification('doPlay')
`####
doPause (iOS)
Pauses the video.
`js
this.$refs.kdp.sendNotification('doPause')
`####
doSeek (iOS)
Sets the play time of the video.
- (float) time.
`js
this.$refs.kdp.sendNotification('doSeek',time)
`####
changeVolume (NOT IMPLEMENTED)
Changes the volume. The volume is a value between 0 and 1.
- (float) volume.
`js
this.$refs.kdp.sendNotification('changeVolume', volume)
`####
selectTrack (NOT IMPLEMENTED)
Selects a track by trackId. See tracksAvailable(callback)).
- (string) trackId.
`js
this.$refs.kdp.sendNotification('selectTrack', trackId)
`Getting player properties
Use the getProperty method to retrieve data from the plugin, such as
duration, time, state, audioTrack, textTrack,####
duration (iOS)
Returns the duration of the video.
- callback: fn(duration) callback returning the duration of the video.
- (float) duration
`js
this.$refs.kdp.getProperty('duration', duration => {
console.log(duration)
})
`####
time (iOS)
Returns the current play time of the video.
- callback: fn(duration) callback returning the plat time of the video.
- (float) time: play time of the video
`js
this.$refs.kdp.getProperty('time', time => {
console.log(time)
})
`####
state (NOT IMPLEMENTED)
Returns the current state of the video.
- callback: fn(duration) callback returning the state of the video.
- (string) state: the state of the video (idle, loading, ready, buffering, error)
`js
this.$refs.kdp.getProperty('state', state => {
console.log(state)
})
`####
textTrack (NOT IMPLEMENTED)
Returns the current text trackId. See tracksAvailable(callback)).
- callback: fn(trackId)
- (string) trackId
`js
this.$refs.kdp.getProperty('textTrack', trackId => {
console.log(trackId)
})
`####
audioTrack (NOT IMPLEMENTED)
Returns the current audio trackId. See tracksAvailable(callback).
- callback: fn(trackId)
- (string) trackId
`js
this.$refs.kdp.sendNotification('audioTrack', trackId => {
console.log(trackId)
})
`Listening to Events
Register player events with
kBind and unregister events with kUnbind.$3
Registers an event.
- eventName: name of the event (See Event List).
- callback: fn(eventData) callback of the event.
`js
this.$refs.kdp.kBind('onTimeChange', time => {
// time = the player's progress time in seconds
});
`$3
Unregister an event.
- eventName: name of the event (See Event List).
`js
this.$refs.kdp.kUnbind('onTimeChange');
`$3
####
timeChange (iOS)
Updates the callback each 500ms with the current time of the video.
- callback: fn(currentTime) callback returning the current time of the video.
- (float) currentTime
`js
this.$refs.kdp.kBind('timeChange', (currentTime) => {
console.log(currentTime)
})
`####
stateChange (iOS)
Dispatched when media player's state has changed.
- callback: fn(playerState)
- (string) playerState: MediaPlayerState: uninitialized / loading / ready / playing / paused / buffering / playbackError
`js
this.$refs.kdp.kBind('stateChange', state => {
console.log('player state: ' + state)
})
`####
durationChanged (NOT IMPLEMENTED)
Sent when enough data is available that the media can be played, at least for a couple of frames.
- callback: fn()
`js
this.$refs.kdp.kBind('durationChanged', newDuration => {
console.log('Duration Changed to: ' + newDuration)
})
`####
ended (NOT IMPLEMENTED)
Sent when playback completes.
- callback: fn()
`js
this.$refs.kdp.kBind('ended', () => {
console.log('Ended')
})
`####
loadedMetadata (NOT IMPLEMENTED)
The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
- callback: fn(metadata)
- (object) metadata
`js
this.$refs.kdp.kBind('loadedMetadata', metadata => {
console.log('Loaded Metadata: ' + JSON.stringify(metadata))
})
`####
seeking (NOT IMPLEMENTED)
Sent when a seek operation begins.
- callback: fn()
`js
this.$refs.kdp.kBind('seeking', () => {
console.log('Seeking')
})
`####
seeked (NOT IMPLEMENTED)
Sent when a seek operation completes.
- callback: fn()
`js
this.$refs.kdp.kBind('seeked', () => {
console.log('Seeked')
})
`####
tracksAvailable (NOT IMPLEMENTED)
Sent when tracks available.
- callback: fn(tracks)
- (JSON) tracks: JSON with the available tracks in the format:
`js
{
audioTracks: [
{
id: "id",
title: "title",
language: "language"
},
(...)
],
textTracks:
{
id: "id",
title: "title",
language: "language"
},
(...)
}
`
`js
this.$refs.kdp.kBind('tracksAvailable', tracks => {
console.log('Tracks Available', tracks)
})
`Data
$3
Description of the player configuration. Used in [prepare and prepareNext.
A media entry can have multiple sources that would be the same video in different formats. The player will choose the source more appropriate to the device.
`js
{
id: 'entryId',
sources: [
{
contentUrl: 'url',
mediaFormat: 'mediaFormat' // e.g. ".hls"
}
]
}
``See How to develop and the Plugin Development Guide.