Skip to main content

Basic Playback

The Quickplay Player is a SceneGraph (SG) Node component with name FLPlayer available within the package's components directory.

Create the Player​

The FLPlayer component can be added to a Scene Graph node component directly or created programmatically and added to view component.

Adding FLPlayer to SceneGraph Component xml file
<?xml version="1.0" encoding="UTF-8"?>
<component name="YourPlayerScene" extends="Group" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://devtools.web.roku.com/schema/RokuSceneGraph.xsd">   
    ...
    <children>
        <FLPlayer id="flplayer" />
    </children>
    ...
</component>
Create FLPlayer programmatically
' create FLPlayer node and add as child
flplayer = CreateObject("roSGNode", "FLPlayer")
m.top.addChild(flplayer)

' create FLPlayer as child
m.top.createChild("FLPlayer")

FLPlayer Fields and Functions​

The player fields and function names can be accessed from fields FLPlayerFields and FLPlayerFunctions on player.

Get player field and function name constants
' get Player field name constants
flPlayerFields = flPlayer.FLPlayerFields
' get Player function name constants
flPlayerFunctions = flPlayer.FLPlayerFunctions

Available player fields

Player Field Name Constants
ASSET
THUMBNAIL_ENDPOINT
LICENSE_HEADERS
INITIAL_PLAYBACK_TIME
PLAYBACK_STATE
BUFFERING_STATE
SEEKING_STATE
DURATION
CURRENT_TIME
CURRENT_EPOCH_TIME
OFFSET_FROM_LIVE
STREAM_INFO
ERROR
AVAILABLE_SUBTITLE_TRACKS
CURRENT_SUBTITLE_TRACK
AVAILABLE_AUDIO_TRACKS
CURRENT_AUDIO_TRACK
CURRENT_TEXT_STYLE
IS_MUTE
LIVE_EVENT
CONTEXT

Available player functions

Player Function Name Constants
PREPARE
PLAY
PAUSE
SEEK
SEEK_TO_LIVE_EDGE
FINISH
ABORT
GET_THUMBNAIL
IS_LIVE
SET_SUBTITLE_TRACK
SET_AUDIO_TRACK
SET_TEXT_STYLE
TOGGLE_MUTE
SET_AD_POLICY

FLPlayer Context​

The player context can be read from field FLPlayerContexts.

Get player context name constants
' get Player context name constants
flPlayerContexts = flPlayer.FLPlayerContexts

Available player functions

Player Context Name Constants
MAIN
AD
PROMO

Add Player State Observers​

The application can listen to events such as player state, buffering state, seeking state and playback errors by observing respective interface fields on FLPlayer.

Observing player state changes
flPlayerFields = flPlayer.FLPlayerFields
flPlayer.observeField(m.flPlayerFields.PLAYBACK_STATE, "onPlaybackStateChanged")
flPlayer.observeField(m.flPlayerFields.BUFFERING_STATE, "onBufferingStateChanged")
flPlayer.observeField(m.flPlayerFields.SEEKING_STATE, "onSeekingStateChanged")
flPlayer.observeField(m.flPlayerFields.ERROR, "onError")

Start Playback​

The content to play must be set on ASSET field for playback as an assocarray object containing media informations like contentUrl, licenseUrl etc.,

At a minimum the asset must contain the following

Asset assocarray for playback
{
    contentUrl: <value>
    licenseUrl: <value>
    mediaFormat: <value>
    drm: <value>
}
note

An asset obtained upon authorization from Quickplay platform can be directly set to ASSET field as is for playback.

Playback Asset​

The complete scheme for playback asset is as follows

Complete Asset assocarray for playback

{
  "contentId": "4784AAA5-7466-48F9-88F2-A17ADE43F87E",
  "contentUrl": "https://demo-cdn-videostreams-new.akamaized.net/sd/pubcontent/vol/4784AAA5-7466-48F9-88F2-A17ADE43F87E/1593534818635-output_hls.ism/index.m3u8",
  "keyframe": {
    "name": "1629429659583-sprite-192x108-~index~.jpg",
    "ia": [
      "1629429659583-sprite-192x108-1",
      "1629429659583-sprite-192x108-2",
      "1629429659583-sprite-192x108-3",
      "1629429659583-sprite-192x108-4",
      "1629429659583-sprite-192x108-5",
      "1629429659583-sprite-192x108-6",
      "1629429659583-sprite-192x108-7",
      "1629429659583-sprite-192x108-8",
      "1629429659583-sprite-192x108-9",
      "1629429659583-sprite-192x108-10",
      "1629429659583-sprite-192x108-11",
      "1629429659583-sprite-192x108-12",
      "1629429659583-sprite-192x108-13",
      "1629429659583-sprite-192x108-14"
    ],
    "frequency": 6,
    "width": 192,
    "height": 108,
    "rows": 10,
    "columns": 10
  },
  "licenseUrl": "https://lafiducia.vsaas.na1.verimatrixuatcloud.net/fairplay",
  "licenseToken": [
    {
      "type": "header",
      "name": "authorization",
      "value": "Bearer eyJhbGciOiJFUzI1NiIsImtpZCI6ImE0NmFhNTkzLTUyNmYtNGM1OS1hZmVmLWU3NDdmYjExOTI5MCIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJ1cm46dmVyaW1hdHJpeDptdWx0aXJpZ2h0cyIsImV4cCI6MTU5NTM5ODM0NywiaWF0IjoxNTk1Mzk4Mjg3LCJpc3MiOiJmaXJzdGxpZ2h0IiwianRpIjoiNzRmNDEzZjItMTIyNC00MDRjLWI1MjItOGZkY2YxNTYwNDAxIiwic3ViIjoiNDc4NGFhYTUtNzQ2Ni00OGY5LTg4ZjItYTE3YWRlNDNmODdlIiwidmVyIjoxfQ.Kw0C8TFIgB9NfywWnlBm6zcl6NqUZvWzdZ2ajkCA7hZD4QQ4HeQXq8T3tgzbJrf9ra735BTQ8sH_i4vwBnRFxw"
    }
  ],
  "mediaFormat": "dash",
  "drm": "widevine",
  "contentTypeId": "live",
  "catalogType": "channel",
  "playbackMode":"live",
  "liveStartTime": "2021-02-14T00:00Z",
  "liveEndTime": "2021-02-14T02:00Z",
  "heartbeatToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsiZmlyc3RsaWdodCJdLCJleHAiOjE2MjE3NTM3NTUsImhlYXJ0YmVhdCI6eyJibGFja291dCI6eyJhbGxvd1JlZ2lvbnMiOlsidmFuIl0sImRlbnlSZWdpb25zIjpbInRvciJdLCJ1c2VyUmVnaW9ucyI6WyJ0b3IiXX0sImNvbnRlbnQiOnsiY2F0YWxvZ1R5cGUiOiJzcG9ydGxpdmVldmVudCIsImNvbnRlbnRJZCI6IjEyMzQ1Njc4OTEiLCJjb250ZW50VHlwZUlkIjoibGl2ZSJ9LCJkZXZpY2UiOnsiZGV2aWNlSWQiOiJ0ZXN0MTIzNCIsImRldmljZU5hbWUiOiJpb3Ntb2JpbGUifSwibG9jYXRpb24iOnsiY291bnRyeSI6ImNhIiwiaXBhZGRyZXNzIjoiNzIuMTM3LjE5LjI1IiwicG9zdGFsIjoibDNwMWExIn19LCJpYXQiOjE2MjE3MTA1NTUsImlzcyI6ImZpcnN0bGlnaHQiLCJqdGkiOiJ0ZXN0MTIzNC0xMjM0NTY3ODkxIiwic3ViIjoidGVzdDEyMzQtMTIzNDU2Nzg5MSJ9.ywDvod3HjufwpvdL-EIJZ0FubIJepRPQTdFGcQ7-8Ww"
}

Live playback mode must be "live", "restart" and "catchup" appropriately for live playback modes and not mandatory for VOD contents. Live start time, end time and heartbeat token is mandatory if heartbeat is integrated with playback.

Player Control Operations​

The Player supports following Control Operations :

  • Prepare - Prebuffer/load a content.
  • Play - Play a paused/loaded content.
  • Pause - Pause a Playing content.
  • Seek - Seek a content to a specified position in the Playback Window.
  • SeekToLiveEdge - Seek a live content to live edge.
danger

Client application developers shouldn't be performing any operations on the underlying raw player. The Player libraries behaviour is undefined, if done so.

Stop & Abort​

  • Invoking flPlayer.callFunc(flPlayerFunctions.FINISH), would stop rendering and all underlying resources would be released.
  • Invoking flPlayer.callFunc(flPlayerFunctions.ABORT, error), would have same effect as flPlayer.callFunc(flPlayerFunctions.FINISH). Additionally, error event would be emitted by player.