JWP Web Player (JW Platform)

<img src="https://img.shields.io/badge/%20-ENTERPRISE-B10031" style="float:left"/><br />
<br />
﻿
If you are not utilizing **Studio DRM with JW Platform** please reference these guides based on your use case:
﻿[Studio DRM Standalone with JW Web Player](🔗﻿) if using **Studio DRM Standalone**
The [DRM Configuration Option in JW Web Player](🔗﻿) if using another vendor’s DRM
JWP provides a simplified approach to protecting<sup>[1](🔗﻿)</sup> your content with industry-standard Digital Rights Management (DRM). By enabling DRM on a property from your JWP dashboard, the complex aspects of DRM management are managed by JWP on your behalf:
Several configured DRM Policies
DRM media content key generation and management for FairPlay Streaming
License delivery services for content playback on any Apple device
<br />
With JWP managing the technical aspects of DRM, you can focus on the design and implementation of engaging content experiences. For more information about the DRM workflow, please refer to the [High-Level Workflow](🔗﻿) Overview.
<br />
<a name="drm-screen-recording"></a><sup>1 <em>Studio DRM blocks recording via browser extensions/add-ons or certain software programs on the application level, but is not guaranteed for all web browsers. Blocking screen recording depends on the Content Decryption Module (CDM) used in the browser. The CDM may vary with browsers updates and versions.</em></sup>
﻿
For the following use cases, use [Studio DRM Standalone](🔗﻿) with your current streaming and hosting solution:
Choosing not to enable Studio DRM with JW Platform
Implementing live stream integrations
<br />
<hr />
## Compatibility
The two most recent stable versions of the following listed browsers are supported.
<table>
    <thead>
        <tr>
            <th> HTML5 Browsers </th>
            <th> FairPlay </th>
            <th> PlayReady </th>
            <th> Widevine </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="55%"> <strong>Chrome</strong> </td>
            <td width="15%"> </td>
            <td width="15%"> </td>
            <td width="15%"> <div align="center"><strong>&check;</strong></div> </td>
        </tr>
        <tr>
            <td> <strong>Firefox</strong> </td>
            <td> </td>
            <td> </td>
            <td> <div align="center"><strong>&check;</strong></div> </td>
        </tr>
        <tr>
            <td> <strong>Internet Explorer 11</strong><br />(Windows <sup>8.1+</sup>) </td>
            <td> </td>
            <td> <div align="center"><strong>&check;</strong></div> </td>
            <td> </td>
        </tr>
        <tr>
            <td> <strong>Microsoft Edge</strong><br />(Windows <sup>10+</sup>) </td>
            <td> </td>
            <td> <div align="center"><strong>&check;</strong></div> </td>
            <td> <div align="center"><strong>&check;</strong></div> </td>
        </tr>
        <tr>
            <td> <strong>Opera</strong> </td>
            <td> </td>
            <td> </td>
            <td> <div align="center"><strong>&check;</strong></div> </td>
        </tr>
        <tr>
            <td> <strong>Safari</strong> </td>
            <td> <div align="center"><strong>&check;</strong></div> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>
<br />
﻿
## Requirements
<table>
    <thead>
        <tr>
            <th> Item </th>
            <th> Notes </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="40%"> <strong>DRM entitlement</strong> </td>
            <td width="60%"> Contact your JWP representative for more information.</td>
        </tr>
        <tr>
            <td> <strong>DRM-enabled property</strong> </td>
            <td> See: <a href="/platform/docs/protection-studio-drm-get-started#enable-a-property" target="_blank">Enable a property</a></td>
        </tr>
        <tr>
            <td> <strong>FairPlay Streaming Deployment Package</strong> </td>
            <td> See: <a href="/platform/docs/protection-studio-drm-get-started#add-fairplay-credentials-to-a-property" target="_blank">Add FairPlay credentials to a property</a></td>
        </tr>
        <tr>
            <td> <strong>Embedded player</strong> </td>
            <td> See: <a href="/players/docs/jw8-add-a-player-library" target="_blank">Add a player library</a></td>
      	</tr>
    </tbody>
</table>
<br />
﻿
## Implementation
Use the following steps to set up DRM playback in your web player:
Generate a <a href="/platform/reference/studio-drm-generate-a-signed-content-url-for-drm-playback" target="_blank">signed URL for DRM playback.</a>
Make a `GET` call with the signed URL. Within the `sources` array of the API response, the content URL with its associated DRM-specific LAURLs are returned.
﻿
Both the media URL and its associated LAURLs are valid for only **10 minutes from when they are requested**. When a multi-item playlist of DRM-protected media is provided to the player, an [intermediary service](🔗﻿) must be used to retrieve valid LAURLs for each media.
﻿
<br />
﻿
<br />
In the `jwplayer().setup()`, create a [ playlist\[\].sources\[\] ](🔗﻿) object in which you define DASH and HLS streams for the same content.<br /><br />The following example includes the following streams: DASH and HLS.
﻿
<br />
For each file (`playlist[].sources[].file`), add the LAURLs into a drm object.
﻿
<br />
<hr />
## Intermediary Service
One way to playback multi-item playlists is to set up an intermediary service that can generate the signed URL mentioned above and make the `GET` request to the Delivery API. The service will then return the relevant LAURLs and content URLs as they are needed by the player.
**This intermediary service should use an appropriate form of authentication to prevent exposing the ability to retrieve valid content URLs and the LAURLs needed to achieve playback.**
Once you have an intermediary service setup the player can be initialized as below. 
<br />
﻿
Each playlist item requires both a valid media ID and `drm` section to be defined. The actual values in the `drm` object are not important. They will be replaced just before each piece of content is loaded with signed links retrieved from the intermediary service.
<br />
﻿
<br />
With this initialization, you can then use the <a href="/players/reference/setplaylistitemcallbackcallback" target="_blank">setPlaylistItemCallback</a> method to update each playlist item before it is loaded with the relevant signed URL.
<br />
The following functions require two global variables:
`policyId` set to a valid policy ID
`urlServiceHost` set to the host DNS of the intermediary service
﻿
<br />
<!-- Removes the automatic page-to-page navigation at the bottom of the page -->
<style>
.rm-Pagination {
  display: none;
}
</style>