Simple JavaScript PlayReady App Walkthrough - Part 1

[アーティクル]
09/19/2014

Before you begin creating the simple PlayReady protected Windows Store app, you must first install the appropriate software as described in Prerequisites. Once you have installed the software, you can begin to set up the simple PlayReady protected app.

In this section you will create the basic PlayReady protected Windows Store app. You will then modify the main page to contain a Play button, a MediaElement control, and a text box that displays messages, warnings, and errors. Then, you will add logging capabilities to the app. Finally, you will add playback capabilities to the app's main page.

To set up the simple PlayReady example in JavaScript

In Visual Studio, from the File menu, choose New, Project.
In the New Project dialog box, under Other Languages, JavaScript, choose Windows Store.
In the Templates pane, choose Blank App, and change the name of the project to PlayReady JS Windows Store app.
Enter the location for the project in the Location text box or use the default location.
Choose the OK button.

Referencing PlayReady Client SDK for Windows Store Apps

The next procedure describes how to set up a reference in your Windows Store app to the PlayReady Client SDK for Windows Store Apps extension.

To add PlayReady Client SDK for Windows Store Apps extension

From the PROJECT menu, choose Add Reference.
In the Reference Manager dialog, expand the Windows tab, and then choose Extensions.
Select the check box next to Microsoft PlayReady Client SDK.
Choose the OK button.
In Solution Explorer, under References, choose Microsoft PlayReady Client SDK.
From the PROJECT menu, choose PlayReady JS Windows Store app Properties.
In the PlayReady JS Windows Store app Property Pages dialog box, choose the Configuration Manager button.
In the Configuration Manager dialog box, under Active solution platform, choose the target platform for your app.

Note

You must choose a specific target platform (x86, x64, or ARM) - do not use Any CPU.

Choose the Close button, then choose the OK button.

Modifying the Main Page

The main page of the Windows Store app consists of the following three elements:

A Play button that launches the playback of the media.
A MediaElement control that plays the video and audio.
A multiline text box in which program execution trace messages are displayed.

To add the elements to the main page

In Solution Explorer, open the shortcut menu for default.html and choose Open.
Add the following line at the end of the PlayReady_JS_RTM_Windows_Store_app references section in the head tag:
```
          <script src="/js/log.js"></script>
```
This line points to the logging functions in the app.

Replace all of the text between the <body> and </body> tags with the following lines:

<input type="button" name="btnPlay" value="Play" onclick="btnPlay_click()" />
<br />
<video id="myVideo" controls="" onended="myVideo_onEnded()"></video>
<br />
<textarea id="myText" style="height:600px;width:800px;font-size:smaller"></textarea>

This code adds a Play button, a MediaElement control, and a text box with a vertical scroll bar on the main page of the app.

Adding the Logging Functions

This section describes how to add the logging functions to the Windows Store app. These log functions display errors, warnings, data, and messages in the text box on the main page of the app.

To add the logging functions to the app

In Solution Explorer, open the shortcut menu for the js folder, and choose Add, New Item.
In the Add New Item dialog box, under JavaScript, choose Code.
In the Templates pane, choose JavaScript File, and change the name to log.js.
Choose the Add button.

Add the following code to the log.js file:

function logMsg(msg) {
  document.getElementById('myText').textContent += msg + '\n';
}

function logWarning(e, functionname) {
  var msg = '***[' + functionname + '] warning: ' + intToHexString(e.number) + ': ' + e.description + '***';
  logMsg(msg);
}

function logError(e, functionname) {
  var msg = '***[' + functionname + '] Failure: ' + intToHexString(e.number) + ': ' + e.description + '***';
  logMsg(msg);
}

function logData(msg) {
  document.getElementById('taLongLog').value += msg + '\n';
}

Adding Playback Capabilities

Clicking the Play button on the main page executes the btnPlay_click event handler. The btnPlay_click handler calls the startPlayBack function which is very similar in processing to the Playback class Play method in the C# example. The key operations are setting up the media protection manager service requested handler and associating the media protection manager with the video player element.

To add playback capabilties:

In Solution Explorer, expand the js folder, then open the shortcut menu for default.js and click Open.

Add the following global variables to the beginning of the default.js file:

//Global Variables
var LAURL = "http://playready.directtaps.net/win/rightsmanager.asmx";
var MEDIA = "http://playready.directtaps.net/win/media/TallShip_with_Credits_folk_rock_soundtrack_encrypted.wmv"

var mpmCompletionNotifier;
var g_mpmCompletionNotifier_set = false;
var videoPlayer;

var g_PostSRCompleteFunction = null;
var g_CurrentServiceRequest = null;
var g_CurrentSRString = null;

These variables include the location of the license acquisition server and the location of the media that is to be played.

Add the following functions to the end of the default.js file:
```
function btnPlay_click() { startPlayBack(); }

function myVideo_onEnded() {
  //Workaround for EOS() known issue when playback attempted again
  logMsg('My Video onEnded()');
  logMsg('Nulling the source');
  myVideo.removeAttribute('src');
  //end of workaround
}
```
The btnPlay_click function is called whenever you choose the Play button on the main page. btnPlay_click then calles the startPlayBack function which initiates the playback of the media specifed in the MEDIA variable.

The myVideo_onEnded function clears the video source attribute after playback has completed, which allows playback to begin again without errors.

Add the following function to the end of the file:

function startPlayBack() {
  var mediaProtectionManager;
  var mediaFilename;

  //New code for ITA activation by ACID
  var cpsystems;

  logMsg('--- Creating new Windows.Media.Protection.MediaProtectionManager');
  mediaProtectionManager = new Windows.Media.Protection.MediaProtectionManager();

  mediaProtectionManager.properties["Windows.Media.Protection.MediaProtectionSystemId"] = '{F4637010-03C3-42CD-B932-B48ADF3A6A54}'

  cpsystems = new Windows.Foundation.Collections.PropertySet();
  cpsystems["{F4637010-03C3-42CD-B932-B48ADF3A6A54}"] = "Microsoft.Media.PlayReadyClient.PlayReadyWinRTTrustedInput";
  mediaProtectionManager.properties["Windows.Media.Protection.MediaProtectionSystemIdMapping"] = cpsystems;

  // End of new code for ITA activation by ACID

  logMsg('Beginning playback attempt...');

  videoPlayer = document.getElementById('myVideo');

  logMsg('--- Setting up video player object');
  videoPlayer.addEventListener('canplay', onCanPlay, false);
  videoPlayer.addEventListener('error', onPlayError, false);

  logMsg('--- Setting up MediaProtectionManager');
  mediaProtectionManager.addEventListener("componentloadfailed", componentLoadFailed, false);
  mediaProtectionManager.addEventListener("servicerequested", serviceRequested, false);

  logMsg('--- Setting up MediaExtensionManager');
  var plugins = new Windows.Media.MediaExtensionManager();
  logMsg('---Registering ByteStreamHandlers');
  plugins.registerByteStreamHandler("Microsoft.Media.PlayReadyClient.PlayReadyByteStreamHandler", ".wma", null);
  plugins.registerByteStreamHandler("Microsoft.Media.PlayReadyClient.PlayReadyByteStreamHandler", ".wmv", null);

  logMsg('--- Setting MediaProtectionManager to video player');
  videoPlayer.msSetMediaProtectionManager(mediaProtectionManager);

  //use default media file
  mediaFilename = MEDIA;

  logMsg('--- Setting player source to ' + mediaFilename);
  videoPlayer.src = mediaFilename;
}

The startPlayBack function sets up the media protection manager service request properties, loads the input media file, and sets up the event listeners for playback, playback and component load errors, and service requests for individualization and license acquisition. It also registers the byte stream handlers for .wma and .wmv file types.

Add the following function to the end of the file:
```
function onCanPlay() {
  logMsg('Attempting to start playback');

  try {
    videoPlayer.play();
  }
  catch (e) {
    logWarning(e, 'onCanPlay');
  }
}
```
This function attempts to play back the requested media after individualization and license acquisition have occurred.

Add the following function to the end of the file:

function onPlayError() {
  if (videoPlayer.src == null) {
    logMsg('Media Source not set');
  }
  else {
    logMsg('Play back failed');
    logMsg('The media element error event was thrown: ' + videoPlayer.error.code);
    logMsg('extended error code: ' + intToHexString(videoPlayer.error.msExtendedCode));
  }
}

This function reports an error to the main page text box if playback fails to occur either because the media file is not specified or an exception occurs when starting to play back the specified media file.

Add the following function to the end of the file:

function componentLoadFailed(e) {
  try {
    logMsg(e.information.items.size + " failed components!");
    logMsg("Components:");

    //  List the failing components
    for (var i = 0; i < e.information.items.size; i++) {
      logMsg(e.information.items[i].name + "\nReasons=0x" + e.information.items[i].reasons 
                                         + '\n' + "Renewal Id=" + e.information.items[i].renewalId);
    }

    e.completion.complete(false);
    logMsg("Resumed source (false)");
  }
  catch (e) {
    logWarning(e, 'componentLoadFailed');
  }
}

This function provides information about any binary data that fails during playback of the media.

This walkthrough continues in Simple JavaScript PlayReady App Walkthrough - Part 2.

次の方法で共有

Simple JavaScript PlayReady App Walkthrough - Part 1

To set up the simple PlayReady example in JavaScript

Referencing PlayReady Client SDK for Windows Store Apps

To add PlayReady Client SDK for Windows Store Apps extension

Modifying the Main Page

To add the elements to the main page

Adding the Logging Functions

To add the logging functions to the app

Adding Playback Capabilities

To add playback capabilties:

その他のリソース