Getting Started

This section will explain how you can easily integrate NexPlayer™ to your website.

NexPlayer™ Integration

Sample

Playing a video with the integrated UI can be done in an HTML5 page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>NexPlayer</title>
    <style type="text/css">
        #player_container {
            width: 90%;
            margin: auto;
            padding-top: 50.625%; /* 16:9 Aspect Ratio 56.25 * 0.9 */
            position: relative;
        }
        @media (min-width: 75rem) {
            #player_container {
                width: 50%;
                padding-top: 28.125%; /* 16:9 Aspect Ratio 56.25 * 0.5 */
            }            
        }
        h1 {
            text-align: center;
        }
        #player {
            background-color: black;
            position: absolute;
            top: 0px;
            width: 100%;
            height: 100%;
        }
        #warning {
            background-color: red;
            text-align: center;
            display: none;
        }
    </style>
</head>

<body>
    <h1>NexPlayer HTML5</h1>
    <div id="warning">
        <h1>Unsupported protocol</h1>
        <h3>Loading HTML using the file protocol can't be supported. Please use a <a href="https://nexplayer.github.io/getting_started.html#explanation">server</a> (HTTP/HTTPS protocol).</h3>
    </div>
    <div id="player_container">
        <div id="player"></div>
    </div>

    <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"></script>
    <script type="text/javascript">
        nexplayer.Setup({
            key: "REPLACE THIS WITH YOUR PLAYER KEY",
            div: document.getElementById('player'),
            src: 'https://d7wce5shv28x4.cloudfront.net/nexplayer/master.m3u8',
            poster: 'https://d7wce5shv28x4.cloudfront.net/HTML5/8.jpg',
            name: 'NexPlayer',
            subtitle: 'E08 The Last Player',
            staticThumbnailsImage: 'https://d7wce5shv28x4.cloudfront.net/HTML5/thumb/sample/thumbnails.png',
            staticThumbnailsVTT: 'https://d7wce5shv28x4.cloudfront.net/HTML5/thumb/sample/video.vtt'
        });

        if (window.location.protocol == 'file:') {
            document.getElementById('warning').style.display = "inherit";
        }
    </script>
</body>
</html>

Please note that replacing the player key is mandatory. You can find the player key in the license section of your dashboard at https://www.nexplayersdk.com/portal/portal-hub.

Please note that we have built a specific library for Samsung Smart TVs. To enable Tizen support, please change the current library to our Tizen library:

<script src="https://nexplayer.nexplayersdk.com/latest/tizen/nexplayer.js"></script>

Explanation

The previous integration can be explained step by step.

  • The JavaScript NexPlayer™ library should be included in the HTML file:
<script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"></script>

Please note that the use of https to call our library is mandatory.

  • A div that will contain the video and the UI has to be declared:
<body>
...
    <div id="player"></div>
...
</body>
  • The player should be initialized by entering the previous div to the Setup method:
nexplayer.Setup({
    key: 'REPLACE THIS WITH YOUR PLAYER KEY',
    div: document.getElementById('player'),
    src: 'https://d7wce5shv28x4.cloudfront.net/nexplayer/master.m3u8'
});

Please note that any JavaScript player won't work in most browsers unless the whole page is downloaded through a web server (local or remote). For development purposes, any local server can be used (eg. webpack-devserver, XAMPP, SublimeServer).

NexPlayer™ Configuration

There are a substantial number of customizable options for NexPlayer™, such as the name and subtitle of the video, a logo for the company, the DRM information, a VAST link, and the thumbnail preview:

{
    key: 'Player key to validate the playback', // Mandatory
    div: document.getElementById('player'), // Mandatory
    src: 'URL video', // Mandatory
    poster: 'URL poster', // Optional
    name: 'Name of the Video', // Optional
    subtitle: 'Subtitle of the video', // Optional
    logosrc: 'URL logo of the company', // Optional
    callbacksForPlayer: callback, // Optional callback called with the player instances
    drm: [{
        NexDRMType:'DRM Type (eg. com.widevine.alpha(', NexDRMKey: 'URI for the DRM Key', 
        NexHeaders:[{FieldName: 'Header Field Name', FiledValue: 'Header Field Value'}], NexCallback:OptionalDRMCallbackForFairPlay
    }], // Optional DRM information
    vast: 'URL with a VAST/VPAID advertisement', // Optional
    useDynamicThumbnails: true, // Optional
    staticThumbnailsImage: 'URL of the image containing the preview thumbnails', // Optional
    staticThumbnailsVTT: 'URL of the VTT file', // Optional
    cast: {} //Optional,
    type_360: '360 visualisation type' // Optional
    ...
}

Common Error Messages

This is a list of common error messages that the player may show. Please note that you can contact the NexPlayer™ support team to get help with any issue.

  • Basic errors:
'[NexPlayer] Error code 101: Player key not valid. Please contact for support.'

This error may appear because the player key that you are using is expired or the domain is not valid for that player key.

  • DRM errors:
'[NexPlayer] Error code 21: Dynamic preview thumbnails are disabled for DRM protected contents.'

This error may appear because you are using protected content and thumnails at the same time. For security reasons, the thumbnails will be disabled.

'[NexPlayer] Error code 22: Event not available for this stream:'

This error may appear because an event called in the callback is not permitted.

results matching ""

    No results matching ""