NexPlayer™ HTML5 is a multi-screen streaming player that enables HLS and DASH live streaming across all browsers and platforms with the highest video quality. NexPlayer™ HTML5 supports, an advanced feature set that includes DRM, Closed Captioning, Time Shifting and 360 video playback among many others.
This repository contains the sample demo code of NexPlayer™ HTML5 with the integration of Mux Data.
To start, you need to have an ENV_KEY from the Mux environments dashboard. 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.
In order to use it, you need to import these files into the HTML and set the muxPlayerInitTime.
<head>
<script src="https://src.litix.io/core/4/mux.js"></script>
<script src="Nexplayer SDK latest release"></script>
<script src="https://nexplayer.nexplayersdk.com/Mux/NexMuxHandShake.js"></script>
<script>window.muxPlayerInitTime = Date.now()</script>
</head>You can find NexMuxHandShake.js in the following repository.
Nexplayer SDK releases
First you should create your muxConfiguration variable with the following structure:
var muxConfiguration = {
debug: true,
disableCookies: true,
respectDoNotTrack: true,
automaticErrorTracking: true,
data: {
env_key: 'ENV_KEY', // required
// Site Metadata
viewer_user_id: '', // ex: '12345'
experiment_name: '', // ex: 'player_test_A'
sub_property_id: '', // ex: 'cus-1'
// Player Metadata
player_name: 'NexPlayer', // ex: 'My Main Player'
player_version: '', // ex: '1.0.0'
player_init_time: window.muxPlayerInitTime, // ex: 1451606400000
// Video Metadata
video_id: '', // ex: 'abcd123'
video_title: '', // ex: 'My Great Video'
video_series: '', // ex: 'Weekly Great Videos'
video_duration: '', // in milliseconds, ex: 120000
video_stream_type: '', // 'live' or 'on-demand'
video_cdn: '' // ex: 'Fastly', 'Akamai'
},
};Properties:
| Param | Type | Description |
|---|---|---|
| debug | boolean |
Enable or disable debug mode |
| disableCookies | boolean |
Disable or enable the cookie that Mux uses to track playback across subsequent page views if desired. |
| respectDoNotTrack | boolean |
By default, mux does not respect Do Not Track when set within browsers. This can be enabled or disabled by this property. |
| automaticErrorTracking | boolean |
Enable or disable automatic error tracking completely. |
| data | Object |
Site, player and video metadata. |
NexMuxHandshake should be created in the callBackWithPlayers after the event “loadeddata” is fired. This object links Nexplayer and Mux events and functions.
var nexMux = null;
var callBackWithPlayers = function (nexplayerInstance, videoElement) {
player = nexplayerInstance;
videoElem = videoElement;
videoElem.addEventListener("loadeddata", function() {
nexMux = new NexMuxHandShake();
// To use ad metrics, set useAdMetrics to true, it is set to false by default.
nexMux.useAdMetrics = true;
nexMux.initMuxData(player, videoElem.id, muxConfiguration);
});
}If your application plays multiple videos back-to-back in the same video player, you should use the following function and pass a data object with the same structure as the muxConfiguration.data object.
nexMux.videoChange(videoElem.id, data);In some cases, you may have the program change within a stream, and you may want to track each program as a view on its own. To do so you should use the following function and pass a data object with the same structure as the muxConfiguration.data object.
nexMux.programChange(videoElem.id, data);Product page NexPlayer™ HTML5
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent