Monitor JW Player (iOS)

This guide walks through integration with JW Player for the web to collect video performance metrics with Mux data.

In this guide:

1
Install Mux Data SDK

1 Install Mux Data SDK

Install Mux-Stats-JWPlayer and import the framework into your application.

2
Initialize the Mux monitor

2 Initialize the Mux monitor

Call monitorJWPlayerController to monitor your JW Player instance.

3
Make your data actionable

3 Make your data actionable

Use metadata fields to make the data collected by Mux actionable and useful.

In order to integrate Mux Data tracking for your JW Player, you will need to be using JW Player 3.x or later. You will need to already have a JW Player license key and an iOS app with a working implementation of JWPlayer-SDK.

1Install Mux Data SDK


pod 'Mux-Stats-JWPlayer', '~> 0.3'

This will install Mux-Stats-JWPlayer and the latest current release of our core Objective-C library.

2Initialize the Mux monitor

Get your ENV_KEY from the Mux environments dashboard.

Env Key is different than your API token

ENV_KEY is a client-side key used for Mux Data monitoring. These are not to be confused with API tokens which are created in the admin settings dashboard and meant to access the Mux API from a trusted server.

Next, import MUXSDKStatsJWPlayer into your application and call MUXSDKStatsJWPlayer.monitorJWPlayerController, passing in your JW player instance and metadata.


import MUXSDKStatsJWPlayer;

class VideoPlayerController: UIViewController {
   var player: JWPlayerController?

  override func viewDidLoad ()
      super.viewDidLoad()
    let config = JWConfig()
    config.file = "http://example.com/hls.m3u8"
    player = JWPlayerController(config: config)
  }

  override func viewDidAppear(_ animated: Bool) {
      super.viewDidAppear(animated)
        player!.view!.frame = self.view.bounds
      view.addSubview(player!.view)

      let playName = "iOS JW player"
      let playerData = MUXSDKCustomerPlayerData(environmentKey: "ENV_KEY");
      // insert player metadata
      let videoData = MUXSDKCustomerVideoData();
      // insert video metada
      MUXSDKStatsJWPlayer.monitorJWPlayerController(player!, name: playName, delegate: nil, playerData: playerData!, videoData: videoData)
            player!.play()
  }
}

Register a delegate (optional)

If your own ViewController implements <JWPlayerDelegate> and you want to use it, then pass that in as the delegate argument to monitorJWPlayerController. See the example below:


override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    player!.view!.frame = self.view.bounds
    view.addSubview(player!.view)

    let playName = "iOS JW player"
    let playerData = MUXSDKCustomerPlayerData(environmentKey: "ENV_KEY");
    // insert player metadata
    let videoData = MUXSDKCustomerVideoData();
    // insert video metada
    // pass in `self` as the delegate
    MUXSDKStatsJWPlayer.monitorJWPlayerController(player!, name: playName, delegate: self, playerData: playerData!, videoData: videoData)
    player!.play()
}

// example of implementing a delegate method
func onReady(_ event: JWEvent & JWReadyEvent) {
  // this will get called when JWPlayer triggers onPlay
}

3Make your data actionable

The only required field is env_key. But without some more metadata the metrics in your dashboard will lack the necessary information to take meaningful actions. Metadata allows you to search and filter on important fields in order to diagnose issues and optimize the playback experience for your end users.

Metadata fields are provided via the MUXSDKCustomerPlayerData and MUXSDKCustomerVideoData objects.

For the full list of properties view the header files for this interfaces:

For more details about each property, view the Make your data actionable guide.


let playName = "iOS AVPlayer"
let playerData = MUXSDKCustomerPlayerData(environmentKey: "ENV_KEY");
playerData.viewerUserId = "1234"
playerData.experimentName = "player_test_A"
// note that the 'playerName' field here is unrelated to the 'playName' variable above
playerData.playerName = "My Main Player"
playerData.playerVersion = "1.0.0"

let videoData = MUXSDKCustomerVideoData();
videoData.videoId = "abcd123"
videoData.videoTitle = "My Great Video"
videoData.videoSeries = "Weekly Great Videos"
videoData.videoDuration = 120000 // in milliseconds
videoData.videoIsLive = false
videoData.videoCdn = "cdn"

MUXSDKStatsJWPlayer.monitorJWPlayerController(player!, name: playName, delegate: self, playerData: playerData!, videoData: videoData)