Latest0.0.2
Homepagehttps://github.com/tralves/weex-kdp
LicenseCopyright copyright
Platformsios 8.0, requires ARC
DependenciesWeexPluginLoader, WeexSDK, PlayKit
FrameworksFoundation, AVFoundation
Authors

weex-kdp

Kaltura Dynamic Player implementation as Weex Components

Installing the plugin in your project

Using weexpack:

weex plugin add weex-plugin-kdp

Manual integration:

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

<weex-kdp>

Adds the weex-kdp plugin to the template. See Data: MediaEntry.

<weexKdp ref="kdp" MediaEntry="{/* MediaEntry */}"></weexKdp>

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:

this.$refs.kdp.sendNotification("doSeek", 30);

Available Notifications

changeMediaEntry (ios)

Prepare for playing an entry. Play when it’s ready.

  • (JSON) MediaEntry: see Data: MediaEntry.
    this.$refs.kdp.sendNotification('prepare', { /* media entry */});

doPlay (iOS)

Plays the video.

this.$refs.kdp.sendNotification('doPlay')

doPause (iOS)

Pauses the video.

this.$refs.kdp.sendNotification('doPause')

doSeek (iOS)

Sets the play time of the video.

  • (float) time.
    this.$refs.kdp.sendNotification('doSeek',time)

changeVolume (NOT IMPLEMENTED)

Changes the volume. The volume is a value between 0 and 1.

  • (float) volume.
    this.$refs.kdp.sendNotification('changeVolume', volume)

selectTrack (NOT IMPLEMENTED)

Selects a track by trackId. See tracksAvailable(callback).

  • (string) trackId.
    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
      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
      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)
      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
      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
      this.$refs.kdp.sendNotification('audioTrack', trackId => {
      console.log(trackId)
      })

Listening to Events

Register player events with kBind and unregister events with kUnbind.

kBind(eventName, callback)

Registers an event.

  • eventName: name of the event (See Event List).
  • callback: fn(eventData) callback of the event.
    this.$refs.kdp.kBind('onTimeChange', time => {
        // time = the player's progress time in seconds
    });

kUnbind(eventName)

Unregister an event.

  • eventName: name of the event (See Event List).
    this.$refs.kdp.kUnbind('onTimeChange');

Event List

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
      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
      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()
    this.$refs.kdp.kBind('durationChanged', newDuration => {
    console.log('Duration Changed to: ' + newDuration)
    })

ended (NOT IMPLEMENTED)

Sent when playback completes.

  • callback: fn()
    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
      this.$refs.kdp.kBind('loadedMetadata', metadata => {
      console.log('Loaded Metadata: ' + JSON.stringify(metadata))
      })

seeking (NOT IMPLEMENTED)

Sent when a seek operation begins.

  • callback: fn()
    this.$refs.kdp.kBind('seeking', () => {
    console.log('Seeking')
    })

seeked (NOT IMPLEMENTED)

Sent when a seek operation completes.

  • callback: fn()
    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:
      {
      audioTracks: [
      {
      id: "id",
      title: "title",
      language: "language"
      },
      (...)
      ],
      textTracks: [
      {
      id: "id",
      title: "title",
      language: "language"
      },
      (...)
      }
      this.$refs.kdp.kBind('tracksAvailable', tracks => {
      console.log('Tracks Available', tracks)
      })

Data

MediaEntry

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.

{
    id: 'entryId',
    sources: [
      {
        contentUrl: 'url',
        mediaFormat: 'mediaFormat' // e.g. ".hls"
      }
    ]
}

Developing the plugin

See How to develop and the Plugin Development Guide.

Latest podspec

{
    "name": "WeexKdp",
    "version": "0.0.2",
    "summary": "Weex Plugin fir the Kaltura Dynamic Player",
    "description": "Weex Plugin fir the Kaltura Dynamic Player",
    "homepage": "https://github.com/tralves/weex-kdp",
    "license": {
        "type": "Copyright",
        "text": "            copyrightn"
    },
    "authors": {
        "Tiago Alves": "[email protected]"
    },
    "platforms": {
        "ios": "8.0"
    },
    "frameworks": [
        "Foundation",
        "AVFoundation"
    ],
    "swift_version": "4.0",
    "source": {
        "git": "https://github.com/tralves/weex-kdp.git",
        "tag": "0.0.2"
    },
    "source_files": "ios/Sources/*.{h,m,mm}",
    "requires_arc": true,
    "static_framework": true,
    "dependencies": {
        "WeexPluginLoader": [],
        "WeexSDK": [
            "0.18.0"
        ],
        "PlayKit": []
    }
}

Pin It on Pinterest

Share This