Getting Started

This section will explain how to integrate NexPlayer™ into your Tizen or WebOS Project

NexPlayer™ Integration

Sample

Integrating NexPlayer™ into an HTML5 file:

<!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>
    
</head>

<body>
    <h1>NexPlayer for WebApps</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/tizen/1.3.5/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',
            subtitle: 'E08 The Last Player'
        });

        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.

Step-by-Step

To integrate NexPlayer™ into you project you must complete the following steps:

  • Add the appropriate NexPlayer™ JavaScript library to the HTML file of your project:
    • Tizen:
    <script src="https://nexplayer.nexplayersdk.com/tizen/1.3.5/nexplayer.js"></script>
    • WebOS:
    <script src="https://nexplayer.nexplayersdk.com/latest/web-os/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 adding 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 (e.g. webpack-devserver, XAMPP, SublimeServer).

NexPlayer™ Remote Controller

Sample

You can create your own custom controls for a seemless integration of NexPlayer™ into your Tizen/WebOS app:


document.addEventListener('keydown', function(e) {
    console.log('Key pressed ---> ' + e.keyCode);
        switch (e.keyCode) {
        case 13:    // Enter
            player.buttonsClickFocus();
            break;
        case 37: // LEFT arrow
        if (player.isPlayBackBarFocused() || !player.isControlBarOpen()) {
            if (!player.isControlBarOpen()) {
            player.toggleControlBar();
            player.focusOnPlaybackBar();
            }
            player.seek(videoElement.currentTime - 60);
        } else {
            player.buttonsPreviousFocus();
        }
        break;
        case 39: // RIGHT arrow
        if (player.isPlayBackBarFocused() || !player.isControlBarOpen()) {
            if (!player.isControlBarOpen()) {
            player.toggleControlBar();
            player.focusOnPlaybackBar();
            }
            player.seek(videoElement.currentTime + 60);
        } else {
            player.buttonsNextFocus();
        }
        break;
        case 38:    // UP arrow
        if (player.isLanguageMenuOpen()) {
            player.upSubtitle();
        } else {
            player.upFocus();
        }
        break;
        case 40:    // DOWN arrow
        if (player.isLanguageMenuOpen()) {
            player.downSubtitle();
            break;
        }

        if (!player.isControlBarOpen()) {
            //player.toggleControlBar();
            player.focusOnButtonsBar();
        } else {
            player.downFocus();
        }
        break;
        }
    });
 

Details

Navigating inside the NexPlayer™ UI can be done by shifting the focus from one element to another with the remote controller. A function can be assigned to one of the buttons of the remote controller using remote control key codes:

example:

{
    case 13:    // Enter button for Samsung Controler
    player.buttonsClickFocus();
    break;
}

Please note the need for a 'break;' line to exit each controller action

All cases must be placed inside a listener to be able to operate at runtime:


    document.addEventListener('keydown', function(e) {
        console.log('Key pressed ---> ' + e.keyCode);
            switch (e.keyCode) {
                
                "YOUR CONTROLS HERE"
                
            }
        }      

NexPlayer™ Configuration

There are a substantial number of customizable options for NexPlayer™ including: the name and subtitle of the video, a logo for the company, the DRM information...

{
    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
    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
    callbacksForPlayer: callback, // Optional callback called with the player instances
}

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 ""