@newrelic/video-videojs 4.0.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,45 @@
1
- # CHANGELOG
1
+ ## [4.1.0](https://github.com/newrelic/video-videojs-js/compare/v4.0.3...v4.1.0) (2026-04-08)
2
+
3
+ ### Breaking Changes
4
+
5
+ - **Method Renames:** Bitrate methods renamed for clarity
6
+ - `getMeasuredBitrate()` → `getSegmentDownloadBitrate()` - ABR bandwidth estimate from player stats
7
+ - `getDownloadBitrate()` → `getNetworkDownloadBitrate()` - Instantaneous network throughput
8
+ - **Note:** Most users won't be affected as these methods are primarily used internally by the tracker
9
+
10
+ ### Deprecated
11
+
12
+ - **Removed `getRenditionBitrate()` method** - No longer needed with improved bitrate tracking system
13
+
14
+ ### Enhancements
15
+
16
+ - **Bitrate Metrics Refactoring:**
17
+ - Implemented consistent fallback pattern across all bitrate methods (VHS direct access → tech wrapper fallback)
18
+ - Simplified network download bitrate to use direct throughput access
19
+ - Enhanced bitrate tracking with four distinct metrics for comprehensive quality analysis
20
+ - Updated all tech wrappers (VHS, hls.js, Shaka) with consistent implementations
2
21
 
22
+ - **Comprehensive Documentation Rewrite:**
23
+ - **README.md:** Complete rewrite with professional structure, badges, features section, table of contents, two installation options, expanded API reference, and clear New Relic support channels
24
+ - **datamodel.md:** Complete rewrite with comprehensive event reference, all four bitrate metrics definitions, QoE attributes, complete attribute tables for all event types, and SSAI/DAI support documentation
25
+ - **DEVELOPING.md:** Complete development guide with setup, build instructions, project structure, testing guidelines, and release process
26
+ - **REVIEW.md:** NEW FILE - Code review guidelines and standards for contributors
27
+
28
+ ### Documentation
29
+
30
+ - Added clear instructions to obtain configuration from [one.newrelic.com](https://one.newrelic.com)
31
+ - Updated all bitrate metric definitions with accurate sources and use cases
32
+ - Added comprehensive API reference with method signatures and examples
33
+ - Enhanced support section with multiple New Relic support channels
34
+ - Added third-party library license disclosure
35
+
36
+ ## [4.0.3](https://github.com/newrelic/video-videojs-js/compare/v4.0.2...v4.0.3) (2025-11-21)
37
+
38
+ ### Bug Fixes
39
+
40
+ - removed github token ([f5f9ade](https://github.com/newrelic/video-videojs-js/commit/f5f9ade01c9af411d72ec74874f8d0750c5f0f66))
41
+
42
+ # CHANGELOG
3
43
 
4
44
  ## [4.0.2] - 2025-10-21
5
45
 
package/README.md CHANGED
@@ -1,131 +1,351 @@
1
1
  [![Community Project header](https://github.com/newrelic/opensource-website/raw/master/src/images/categories/Community_Project.png)](https://opensource.newrelic.com/oss-category/#community-project)
2
2
 
3
- # New Relic Videojs Tracker Agent
3
+ # New Relic Video.js Tracker
4
4
 
5
- The New Relic Videojs Tracker enhances your media applications by tracking video events, playback errors, and other activities, providing comprehensive insights into performance and user interactions.
5
+ [![npm version](https://badge.fury.io/js/%40newrelic%2Fvideo-videojs.svg)](https://badge.fury.io/js/%40newrelic%2Fvideo-videojs)
6
+ [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
6
7
 
7
- - The Videojs tracker is available as a ready-to-use JavaScript snippet for easy copy-paste integration.
8
- - New Relic Videojs tracker auto-detects events emitted by Videojs Player.
9
- - Ensure that the **Browser agent** is successfully instrumented before deploying the media tracker.
10
- - For questions and feedback on this package, please visit the [Explorer's Hub](https://discuss.newrelic.com), New Relic's community support forum.
11
- - Looking to contribute to the Player Name agent code base? See [DEVELOPING.md](./DEVELOPING.md) for instructions on building and testing the browser agent library, and Contributors.
8
+ The New Relic Video.js Tracker provides comprehensive video analytics for applications using Video.js Player. Track video events, monitor playback quality, identify errors, and gain deep insights into user engagement and streaming performance.
12
9
 
13
- ## Adding The Videojs Tracker To Your Project
10
+ ## Features
14
11
 
15
- To integrate New Relic Tracker Agent into your web application effectively, you'll need to instrument the Browser Agent code first and then add the player script. Below is a guide on how to do this within your HTML file:
12
+ - 🎯 **Automatic Event Detection** - Captures Video.js player events automatically without manual instrumentation
13
+ - 📊 **Comprehensive Bitrate Tracking** - Four distinct bitrate metrics for complete quality analysis
14
+ - 🎬 **Ad Tracking Support** - Full support for IMA, Freewheel, and SSAI (Server-Side Ad Insertion)
15
+ - 🔧 **Multi-Tech Support** - Works with VHS, hls.js, and Shaka Player
16
+ - 📈 **QoE Metrics** - Quality of Experience aggregation for startup time, buffering, and playback quality
17
+ - 🎨 **Event Segregation** - Organized event types: `VideoAction`, `VideoAdAction`, `VideoErrorAction`, `VideoCustomAction`
18
+ - 🚀 **Easy Integration** - NPM package or direct script include
19
+
20
+ ## Table of Contents
21
+
22
+ - [Installation](#installation)
23
+ - [Option 1: NPM/Yarn](#option-1-install-via-npmyarn)
24
+ - [Option 2: Direct Script Include](#option-2-direct-script-include-without-npm)
25
+ - [Usage](#usage)
26
+ - [Configuration Options](#configuration-options)
27
+ - [API Reference](#api-reference)
28
+ - [Ad Tracking Support](#ad-tracking-support)
29
+ - [Data Model](#data-model)
30
+ - [Support](#support)
31
+ - [Contributing](#contributing)
32
+ - [License](#license)
33
+
34
+ ## Installation
35
+
36
+ ### Option 1: Install via NPM/Yarn
37
+
38
+ Install the package using your preferred package manager:
39
+
40
+ **NPM:**
41
+
42
+ ```bash
43
+ npm install @newrelic/video-videojs
44
+ ```
45
+
46
+ **Yarn:**
47
+
48
+ ```bash
49
+ yarn add @newrelic/video-videojs
50
+ ```
51
+
52
+ ### Option 2: Direct Script Include (Without NPM)
53
+
54
+ For quick integration without a build system, include the tracker directly in your HTML:
16
55
 
17
56
  ```html
18
57
  <!DOCTYPE html>
19
- <html lang="en">
58
+ <html>
20
59
  <head>
21
- <meta charset="UTF-8" />
22
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
23
- <title>New Relic Tracker Integration</title>
24
- <script src="path/to/browser-agent.js"></script>
25
- <!-- snippet code generated -->
26
- <script src="path/to/videojs-tracker.js"></script>
60
+ <!-- Video.js Player -->
61
+ <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
62
+ <script src="https://vjs.zencdn.net/7.20.3/video.js"></script>
63
+
64
+ <!-- New Relic Video.js Tracker -->
65
+ <script src="path/to/newrelic-video-videojs.min.js"></script>
27
66
  </head>
28
67
  <body>
29
- <!-- Your HTML content -->
68
+ <video id="myVideo" class="video-js" controls width="640" height="480">
69
+ <source src="https://your-video-source.mp4" type="video/mp4" />
70
+ </video>
71
+
72
+ <script>
73
+ // Initialize Video.js player
74
+ var player = videojs('myVideo');
75
+
76
+ // Configure New Relic tracker with info from one.newrelic.com
77
+ const options = {
78
+ info: {
79
+ licenseKey: 'YOUR_LICENSE_KEY',
80
+ beacon: 'YOUR_BEACON_URL',
81
+ applicationId: 'YOUR_APP_ID',
82
+ },
83
+ };
84
+
85
+ // Initialize tracker
86
+ const tracker = new VideojsTracker(player, options);
87
+ </script>
30
88
  </body>
31
89
  </html>
32
90
  ```
33
91
 
34
- ## Adding the agent package to your project
92
+ **Setup Steps:**
35
93
 
36
- To make the tracker available to your application, install via [NPM](https://docs.npmjs.com/cli/v8/commands/npm-install) or [Yarn](https://classic.yarnpkg.com/lang/en/docs/cli/install/).
94
+ 1. **Get Configuration** - Visit [one.newrelic.com](https://one.newrelic.com) and complete the video agent onboarding to obtain your credentials (`licenseKey`, `beacon`, `applicationId`)
95
+ 2. **Download Tracker** - Get `newrelic-video-videojs.min.js` from:
96
+ - [GitHub Releases](https://github.com/newrelic/video-videojs-js/releases) (recommended)
97
+ - Build from source: `npm run build` → `dist/umd/newrelic-video-videojs.min.js`
98
+ 3. **Integrate** - Include the script in your HTML and initialize with your configuration
37
99
 
38
- ```shell
39
- $ npm install @newrelic/video-videojs
40
- ```
100
+ ## Usage
41
101
 
42
- ```shell
43
- $ yarn add @newrelic/video-videojs
44
- ```
102
+ ### Getting Your Configuration
103
+
104
+ Before initializing the tracker, obtain your New Relic configuration:
105
+
106
+ 1. Log in to [one.newrelic.com](https://one.newrelic.com)
107
+ 2. Navigate to the video agent onboarding flow
108
+ 3. Copy your credentials: `licenseKey`, `beacon`, and `applicationId`
45
109
 
46
- ## Instantiating the Videojs Tracker
110
+ ### Basic Setup
47
111
 
112
+ ```javascript
113
+ import VideojsTracker from '@newrelic/video-videojs';
114
+
115
+ // Initialize Video.js player
116
+ const player = videojs('myVideo');
117
+
118
+ // Set player version (required)
119
+ player.version = videojs.VERSION;
48
120
 
49
- > [!NOTE]
50
- > **Attention:**
51
- > This version uses the latest **standalone** version of the Videojs Tracker, In order to initialize it you need to do the following:
121
+ // Configure tracker with credentials from one.newrelic.com
122
+ const options = {
123
+ info: {
124
+ licenseKey: 'YOUR_LICENSE_KEY',
125
+ beacon: 'YOUR_BEACON_URL',
126
+ applicationId: 'YOUR_APP_ID',
127
+ },
128
+ };
52
129
 
53
- Steps to get NREUM config
54
- - Create a New Relic account and obtain your license key.
55
- - Install the New Relic Streaming video agent in your application.
56
- - Configure the video agent with your license key and application ID.
130
+ // Initialize tracker
131
+ const tracker = new VideojsTracker(player, options);
132
+ ```
57
133
 
58
- The NREUM config looks like this:
134
+ ### Advanced Configuration
59
135
 
60
136
  ```javascript
61
- /* Get the info object from the video agent onboarding */
62
- options = {
137
+ const options = {
63
138
  info: {
64
- beacon: 'xxxxxxxxxxx',
65
- licenseKey: 'xxxxxxxxxxx',
66
- applicationID: 'xxxxxxxxxxxx',
139
+ licenseKey: 'YOUR_LICENSE_KEY',
140
+ beacon: 'YOUR_BEACON_URL',
141
+ applicationId: 'YOUR_APP_ID',
142
+ },
143
+ config: {
144
+ qoeAggregate: true, // Enable QoE event aggregation
145
+ qoeIntervalFactor: 2, // Send QoE events every 2 harvest cycles
146
+ },
147
+ customData: {
148
+ contentTitle: 'My Video Title',
149
+ customPlayerName: 'MyCustomPlayer',
150
+ customAttribute: 'customValue',
67
151
  },
68
152
  };
153
+
154
+ const tracker = new VideojsTracker(player, options);
69
155
  ```
70
156
 
157
+ ## Configuration Options
158
+
159
+ ### QoE (Quality of Experience) Settings
160
+
161
+ | Option | Type | Default | Description |
162
+ | ------------------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
163
+ | `qoeAggregate` | boolean | `false` | Enable Quality of Experience event aggregation. Set to `true` to collect QoE metrics like startup time, buffering, and average bitrate. |
164
+ | `qoeIntervalFactor` | number | `1` | Controls QoE event frequency. A value of `N` sends QoE events once every N harvest cycles. Must be a positive integer. QoE events are always included on first and final harvest cycles. |
165
+
166
+ ### Custom Data
167
+
168
+ Add custom attributes to all events:
169
+
71
170
  ```javascript
72
- import VideojsTracker from "@newrelic/video-videojs";
171
+ customData: {
172
+ contentTitle: 'My Video Title', // Override video title
173
+ customPlayerName: 'MyPlayer', // Custom player identifier
174
+ customPlayerVersion: '1.0.0', // Custom player version
175
+ userId: '12345', // User identifier
176
+ // Add any custom attributes you need
177
+ }
178
+ ```
73
179
 
74
- // pass player version
75
- player.version = videojs.VERSION;
180
+ ## API Reference
76
181
 
77
- // initialize VideojsTracker with player and options
78
- const tracker = new VideojsTracker(player, options);
182
+ ### Core Methods
79
183
 
80
- // ================================================= //
184
+ #### `tracker.setUserId(userId)`
81
185
 
82
- //For setting custom attributes const tracker
83
- const tracker = new VideojsTracker(player, {
186
+ Set a unique identifier for the current user.
187
+
188
+ ```javascript
189
+ tracker.setUserId('user-12345');
190
+ ```
191
+
192
+ #### `tracker.setHarvestInterval(milliseconds)`
193
+
194
+ Configure how frequently data is sent to New Relic. Accepts values between 1000ms (1 second) and 300000ms (5 minutes).
195
+
196
+ ```javascript
197
+ tracker.setHarvestInterval(30000); // Send data every 30 seconds
198
+ ```
199
+
200
+ #### `tracker.sendCustom(actionName, attributes)`
201
+
202
+ Send custom events with arbitrary attributes.
203
+
204
+ ```javascript
205
+ tracker.sendCustom('VideoBookmarked', {
206
+ timestamp: Date.now(),
207
+ position: player.currentTime(),
208
+ userId: 'user-12345',
209
+ bookmarkId: 'bookmark-789',
210
+ });
211
+ ```
212
+
213
+ #### `tracker.setOptions(options)`
214
+
215
+ Update tracker configuration after initialization.
216
+
217
+ ```javascript
218
+ tracker.setOptions({
84
219
  customData: {
85
- contentTitle: 'Override Existing Title',
86
- customPlayerName: 'myGreatPlayer',
87
- customPlayerVersion: '9.4.2',
220
+ contentTitle: 'New Video Title',
221
+ season: '1',
222
+ episode: '3',
88
223
  },
89
224
  });
225
+ ```
90
226
 
91
- // For setting userId
92
- tracker.setUserId('userId');
227
+ ### Example: Complete Integration
93
228
 
94
- // set tracker interval, between 1s - 5mins
95
- tracker.setHarvestInterval(1000)
229
+ ```javascript
230
+ import VideojsTracker from '@newrelic/video-videojs';
231
+
232
+ // Initialize player and tracker
233
+ const player = videojs('myVideo');
234
+ player.version = videojs.VERSION;
235
+
236
+ const tracker = new VideojsTracker(player, {
237
+ info: {
238
+ licenseKey: 'YOUR_LICENSE_KEY',
239
+ beacon: 'YOUR_BEACON_URL',
240
+ applicationId: 'YOUR_APP_ID',
241
+ },
242
+ config: {
243
+ qoeAggregate: true,
244
+ },
245
+ });
96
246
 
97
- // For Sending custom Action with Attributes
98
- tracker.sendCustom('CustomAction', { data: "custom-test" })
247
+ // Set user context
248
+ tracker.setUserId('user-12345');
99
249
 
250
+ // Configure reporting interval
251
+ tracker.setHarvestInterval(30000);
252
+
253
+ // Send custom events
254
+ player.on('userEngagement', () => {
255
+ tracker.sendCustom('UserEngaged', {
256
+ action: 'like',
257
+ timestamp: Date.now(),
258
+ });
259
+ });
100
260
  ```
101
261
 
102
- ## Support for SSAI
262
+ ## Ad Tracking Support
263
+
264
+ The tracker provides comprehensive ad tracking capabilities:
103
265
 
104
- > [!NOTE]
105
- > **Attention:**
106
- > This version supports tracking for SSAI (Server-Side Ad Insertion), checkout examples in [/samples/dai/index.html](./samples/dai/index.html)
266
+ ### Supported Ad Technologies
107
267
 
268
+ - **IMA (Interactive Media Ads)** - Google IMA SDK integration
269
+ - **Freewheel** - Freewheel ad platform support
270
+ - **SSAI (Server-Side Ad Insertion)** - Dynamic Ad Insertion (DAI) support
271
+
272
+ ### SSAI/DAI Integration
273
+
274
+ Server-Side Ad Insertion is fully supported with automatic detection and tracking:
275
+
276
+ ```javascript
277
+ // SSAI is automatically detected - no additional configuration needed
278
+ const tracker = new VideojsTracker(player, options);
279
+
280
+ // The tracker will automatically capture:
281
+ // - Ad breaks, starts, and completions
282
+ // - Ad quartiles and click events
283
+ // - SSAI-specific metadata
284
+ ```
285
+
286
+ **Example:** See [samples/dai/index.html](./samples/dai/index.html) for a complete SSAI implementation.
108
287
 
109
288
  ## Data Model
110
289
 
111
- To understand which actions and attributes are captured and emitted by the Videojs Player under different event types, see [DataModel.md](./DATAMODEL.md).
290
+ The tracker captures comprehensive video analytics across four event types:
291
+
292
+ - **VideoAction** - Playback events (play, pause, buffer, seek, quality changes)
293
+ - **VideoAdAction** - Ad events (ad start, quartiles, completions, clicks)
294
+ - **VideoErrorAction** - Error events (playback failures, network errors)
295
+ - **VideoCustomAction** - Custom events defined by your application
296
+
297
+ ### Bitrate Metrics
298
+
299
+ Four distinct bitrate metrics provide complete quality analysis:
300
+
301
+ - `contentBitrate` - Current rendition encoding bitrate
302
+ - `contentManifestBitrate` - Maximum available quality
303
+ - `contentSegmentDownloadBitrate` - ABR bandwidth estimate
304
+ - `contentNetworkDownloadBitrate` - Instantaneous throughput
305
+
306
+ **Full Documentation:** See [datamodel.md](./datamodel.md) for complete event and attribute reference.
112
307
 
113
308
  ## Support
114
309
 
115
- New Relic hosts and moderates an online forum where customers can interact with New Relic employees as well as other customers to get help and share best practices. Like all official New Relic open source projects, there's a related Community topic in the New Relic [Explorer's Hub](https://discuss.newrelic.com).
310
+ Should you need assistance with New Relic products, you are in good hands with several support channels.
311
+
312
+ If the issue has been confirmed as a bug or is a feature request, please file a [GitHub issue](../../issues).
313
+
314
+ ### Support Channels
116
315
 
117
- We encourage you to bring your experiences and questions to the [Explorer's Hub](https://discuss.newrelic.com) where our community members collaborate on solutions and new ideas.
316
+ - **[New Relic Documentation](https://docs.newrelic.com)**: Comprehensive guidance for using our platform
317
+ - **[New Relic Community](https://discuss.newrelic.com)**: The best place to engage in troubleshooting questions
318
+ - **[New Relic University](https://learn.newrelic.com)**: A range of online training for New Relic users of every level
319
+ - **[New Relic Technical Support](https://support.newrelic.com)**: 24/7/365 ticketed support. Read more about our [Technical Support Offerings](https://docs.newrelic.com/docs/licenses/license-information/general-usage-licenses/support-plan)
320
+
321
+ ### Additional Resources
322
+
323
+ - **[datamodel.md](./datamodel.md)** - Complete event and attribute reference
324
+ - **[DEVELOPING.md](./DEVELOPING.md)** - Building and testing instructions
325
+ - **[REVIEW.md](./REVIEW.md)** - Code review guidelines
118
326
 
119
327
  ## Contributing
120
328
 
121
- We encourage your contributions to improve New Relic Videojs Tracker! Keep in mind when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. You only have to sign the CLA one time per project. If you have any questions, or to execute our corporate CLA, required if your contribution is on behalf of a company, please drop us an email at opensource@newrelic.com.
329
+ We encourage your contributions to improve the Video.js Tracker! Keep in mind that when you submit your pull request, you'll need to sign the CLA via the click-through using CLA-Assistant. You only have to sign the CLA one time per project.
330
+
331
+ If you have any questions, or to execute our corporate CLA (which is required if your contribution is on behalf of a company), drop us an email at opensource@newrelic.com.
122
332
 
123
- **A note about vulnerabilities**
333
+ For more details on how best to contribute, see [CONTRIBUTING.md](./CONTRIBUTING.md).
334
+
335
+ ### A Note About Vulnerabilities
124
336
 
125
337
  As noted in our [security policy](../../security/policy), New Relic is committed to the privacy and security of our customers and their data. We believe that providing coordinated disclosure by security researchers and engaging with the security community are important means to achieve our security goals.
126
338
 
127
- If you believe you have found a security vulnerability in this project or any of New Relic's products or websites, we welcome and greatly appreciate you reporting it to New Relic through [our bug bounty program](https://docs.newrelic.com/docs/security/security-privacy/information-security/report-security-vulnerabilities/).
339
+ If you believe you have found a security vulnerability in this project or any of New Relic's products or websites, we welcome and greatly appreciate you reporting it to New Relic through our [bug bounty program](https://docs.newrelic.com/docs/security/security-privacy/information-security/report-security-vulnerabilities/).
340
+
341
+ ### Acknowledgments
342
+
343
+ If you would like to contribute to this project, review [these guidelines](./CONTRIBUTING.md).
344
+
345
+ To all contributors, we thank you! Without your contribution, this project would not be what it is today.
128
346
 
129
347
  ## License
130
348
 
131
- New Relic Videojs Tracker is licensed under the [Apache 2.0](http://apache.org/licenses/LICENSE-2.0.txt) License.
349
+ The Video.js Tracker is licensed under the [Apache 2.0](http://apache.org/licenses/LICENSE-2.0.txt) License.
350
+
351
+ The Video.js Tracker also uses source code from third-party libraries. Full details on which libraries are used and the terms under which they are licensed can be found in the [third-party notices document](./THIRD_PARTY_NOTICES.md).
@@ -240,6 +240,7 @@ This product includes source derived from [@newrelic/video-core](https://github.
240
240
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
241
241
  See the License for the specific language governing permissions and
242
242
  limitations under the License.
243
+
243
244
  ```
244
245
 
245
246