stormcloud-video-player 0.6.12 → 0.6.13

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/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Stormcloud Video Player
2
2
 
3
- A professional video player with advanced ad integration for web applications. Built with precision ad break alignment, SCTE-35 signal parsing, and Prebid Server integration for server-side header bidding and VAST ad playback. Now featuring a modern, extensible architecture inspired by react-player.
3
+ A professional video player with advanced ad integration for web applications. Built with precision ad break alignment, SCTE-35 signal parsing, and Google Ad Manager (GAM) VAST ad playback. Now featuring a modern, extensible architecture inspired by react-player.
4
4
 
5
5
  ## 🎯 Key Features
6
6
 
@@ -13,7 +13,6 @@ A professional video player with advanced ad integration for web applications. B
13
13
  - **Cross-Platform**: Works on desktop, mobile, tablets, and smart TVs
14
14
  - **React Ready**: Multiple React components for different use cases
15
15
  - **TypeScript Support**: Full type definitions included
16
- - **Prebid Server Support**: Server-side header bidding via OpenRTB 2.5 with zero client-side SDK
17
16
  - **Professional Architecture**: Modular player system with lazy loading
18
17
 
19
18
  ## 🚀 Quick Start
@@ -42,7 +41,6 @@ function MyVideoApp() {
42
41
  showCustomControls={true} // Enable enhanced UI controls
43
42
  allowNativeHls={true} // Allow native HLS for better performance
44
43
  licenseKey="your_license_key_here"
45
- vastMode="adstorm" // Use AdStorm mode with HLS ad player
46
44
  style={{ width: "100%", aspectRatio: "16/9" }}
47
45
  wrapperStyle={{ borderRadius: "12px", overflow: "hidden" }}
48
46
  onReady={(player) => {
@@ -79,7 +77,6 @@ function MyVideoApp() {
79
77
  allowNativeHls={true}
80
78
  showCustomControls={true}
81
79
  licenseKey="your_license_key_here"
82
- vastMode="adstorm" // Use AdStorm mode (or omit for default mode)
83
80
  onReady={(player) => {
84
81
  console.log("Player is ready!", player);
85
82
  }}
@@ -147,7 +144,7 @@ Include the single script tag and access everything from `window.StormcloudVP`:
147
144
  </script>
148
145
  ```
149
146
 
150
- Prebid utilities (`createPrebidManager`, `createPrebidController`) are available on the `window.StormcloudVP` global. See the [Prebid Mode](#3-prebid-mode-server-side-header-bidding) section for a full CDN example with Prebid Server.
147
+ VAST ad utilities (`createVastManager`, `createVastAdLayer`) are available from the package exports and on the `window.StormcloudVP` global when using the CDN bundle.
151
148
 
152
149
  ## 🏗️ Professional Architecture
153
150
 
@@ -170,7 +167,7 @@ StormcloudPlayer (Main Component)
170
167
  - **Purpose**: Handles HLS (.m3u8) streams with advanced features
171
168
  - **Features**:
172
169
  - SCTE-35 ad marker detection and processing
173
- - Prebid Server integration for VAST ad playback
170
+ - GAM VAST integration for ad playback
174
171
  - Live stream support with low-latency mode
175
172
  - Drift correction for live timing
176
173
  - Manifest-based and ID3 ad markers
@@ -273,11 +270,6 @@ interface StormcloudPlayerProps {
273
270
  adFailsafeTimeoutMs?: number;
274
271
  minSegmentsBeforePlay?: number; // Number of segments to buffer before starting playback (default: 2)
275
272
 
276
- // Ad player configuration
277
- vastMode?: 'adstorm' | 'default'; // VAST mode (default: 'default')
278
- vastTagUrl?: string; // Custom VAST URL (if provided)
279
- prebid?: PrebidConfig; // Prebid Server configuration for ad auctions
280
-
281
273
  // Event handlers
282
274
  onReady?: (player: StormcloudVideoPlayer) => void;
283
275
  onStart?: () => void;
@@ -360,11 +352,6 @@ interface StormcloudVideoPlayerConfig {
360
352
  adFailsafeTimeoutMs?: number; // Ad timeout in milliseconds (default: 10000)
361
353
  minSegmentsBeforePlay?: number; // Number of segments to buffer before starting playback (default: 2)
362
354
 
363
- // Ad configuration
364
- vastMode?: 'adstorm' | 'default'; // VAST mode (default: 'default')
365
- vastTagUrl?: string; // Custom VAST tag URL (if provided)
366
- prebid?: PrebidConfig; // Prebid Server configuration for ad auctions
367
-
368
355
  onVolumeToggle?: () => void; // Callback for volume toggle
369
356
  onFullscreenToggle?: () => void; // Callback for fullscreen toggle
370
357
  onControlClick?: () => void; // Callback for control area clicks
@@ -424,269 +411,36 @@ All controls use a consistent high-contrast design:
424
411
 
425
412
  ## 🎬 Ad Integration (HLS Streams Only)
426
413
 
427
- ### VAST Mode Configuration
428
-
429
- The player supports two VAST modes that automatically configure the appropriate ad player:
414
+ ### GAM VAST Configuration
430
415
 
431
- #### 1. **AdStorm Mode** (Recommended)
432
-
433
- Uses AdStorm backend with HLS ad player for optimal performance:
416
+ The player fetches VAST creatives from Google Ad Manager (GAM) and plays them natively during SCTE-35 ad breaks.
434
417
 
435
418
  ```javascript
436
419
  const player = new StormcloudVideoPlayer({
437
420
  videoElement: video,
438
421
  src: "https://your-stream.com/playlist.m3u8",
439
422
  licenseKey: "your-license-key",
440
-
441
- // AdStorm mode - uses HLS ad player automatically
442
- vastMode: 'adstorm',
443
-
444
423
  debugAdTiming: true,
445
424
  });
446
425
  ```
447
426
 
448
427
  **What happens:**
449
- - 🎯 Ad playback via Prebid Controller
450
- - 🔗 VAST endpoint: `GET https://adstorm.co/api-adstorm-dev/adstorm/vast/{licenseKey}`
451
- - License key is passed in the URL path (no authorization header needed)
452
- - Returns VAST XML directly with HLS media files
453
- - 📊 Direct tracking and analytics through AdStorm backend
454
- - ⚠️ Gracefully handles "no ads available" scenarios (logs warnings, not errors)
428
+ - Fetches VAST XML from a GAM ad tag URL (built-in fallback or license-based backend lookup)
429
+ - Parses VAST and plays MP4/HLS creatives through the internal ad layer
430
+ - Fires VAST tracking events (impression, quartiles, complete, etc.)
431
+ - Aligns ad playback to SCTE-35 CUE-OUT / CUE-IN markers
455
432
 
456
433
  **API Flow:**
457
- 1. Player calls `/vast/{licenseKey}` endpoint
458
- 2. Backend returns VAST XML with HLS media files
459
- 3. Player parses VAST XML and extracts MediaFile URLs
460
- 4. HLS ad player loads and plays the ad segments
434
+ 1. Player initializes `createVastManager` with optional `licenseKey`
435
+ 2. If a license key is set, the player may fetch a GAM tag URL from `/ads/web`
436
+ 3. Each ad request hits GAM with a unique correlator and receives VAST XML
437
+ 4. The ad layer loads and plays the winning creative
461
438
 
462
439
  **Benefits:**
463
- - Zero external ad SDK dependencies (Prebid Server only)
464
- - Full control over ad serving
465
- - Native HLS playback (same format as content)
466
- - Better performance and reliability
467
- - ✅ Custom targeting and selection
468
- - ✅ Proper error handling (distinguishes parsing errors from "no ads available")
469
-
470
- #### 2. **Default Mode**
471
-
472
- Ad playback uses Prebid Server for VAST ads:
473
-
474
- ```javascript
475
- const player = new StormcloudVideoPlayer({
476
- videoElement: video,
477
- src: "https://your-stream.com/playlist.m3u8",
478
- licenseKey: "your-license-key",
479
-
480
- // Uses Prebid Controller for ad playback
481
- vastMode: 'default', // or omit this property entirely
482
- vastTagUrl: 'https://your-vast-server.com/vast.xml', // optional
483
-
484
- debugAdTiming: true,
485
- });
486
- ```
487
-
488
- **What happens:**
489
- - 🎯 Ad playback via Prebid Controller
490
- - 🔗 VAST endpoint resolution:
491
- 1. If `vastTagUrl` is provided, uses that URL directly
492
- 2. Otherwise, calls `GET https://adstorm.co/api-adstorm-dev/adstorm/ads/web`
493
- - Requires `Authorization: Bearer {licenseKey}` header
494
- - Returns VAST URLs from your ad backend
495
- - Extracts VAST tag URL from the `payload` field
496
- - 📊 VAST ad serving through Prebid Server
497
-
498
- **API Flow:**
499
- 1. Player calls `/ads/web` endpoint with Bearer token (if no `vastTagUrl` provided)
500
- 2. Backend or Prebid Server provides VAST URLs
501
- 3. Player extracts VAST tag URL from `response.ima["publisherdesk.ima"].payload`
502
- 4. Prebid Controller loads and plays the VAST ad
503
-
504
- **Benefits:**
505
- - ✅ Industry-standard ad serving
506
- - ✅ Wide format support (VAST, VPAID)
507
- - ✅ Established ecosystem
508
- - ✅ Backward compatible with existing VAST tags
509
- - ✅ Supports both custom VAST URLs and AdStorm backend
510
-
511
- #### 3. **Prebid Mode** (Server-Side Header Bidding)
512
-
513
- Uses Prebid Server for server-side header bidding auctions. The player sends OpenRTB requests directly to a Prebid Server instance, receives bid responses with VAST creatives, and plays the winning ad — all without any external SDK.
514
-
515
- **Vanilla JavaScript:**
516
-
517
- ```javascript
518
- const player = new StormcloudVideoPlayer({
519
- videoElement: video,
520
- src: "https://your-stream.com/playlist.m3u8",
521
- licenseKey: "your-license-key",
522
-
523
- prebid: { /* PrebidConfig */ },
524
- prebid: {
525
- enabled: true,
526
- serverUrl: "https://prebid-server.example.com",
527
- timeout: 3000,
528
- debug: true,
529
- cpmFloor: 0.50,
530
- ortbRequest: {
531
- id: "my-video-player",
532
- imp: [
533
- {
534
- id: "video-imp-1",
535
- video: {
536
- w: 640,
537
- h: 480,
538
- mimes: ["video/mp4", "application/x-mpegURL"],
539
- protocols: [2, 5],
540
- minduration: 5,
541
- maxduration: 60,
542
- linearity: 1,
543
- playbackmethod: [1, 2],
544
- },
545
- ext: {
546
- prebid: {
547
- bidder: {
548
- appnexus: { placement_id: 12345 },
549
- rubicon: { account_id: 1001, site_id: 2002, zone_id: 3003 },
550
- },
551
- },
552
- },
553
- },
554
- ],
555
- tmax: 3000,
556
- site: {
557
- domain: "example.com",
558
- page: "https://example.com/video-page",
559
- },
560
- },
561
- },
562
-
563
- debugAdTiming: true,
564
- });
565
-
566
- await player.load();
567
- ```
568
-
569
- **CDN Usage:**
570
-
571
- ```html
572
- <video id="video" style="width:100%;aspect-ratio:16/9"></video>
573
-
574
- <script src="https://cdn.jsdelivr.net/npm/stormcloud-video-player/dist/stormcloud-vp.min.js"></script>
575
- <script>
576
- var StormcloudVideoPlayer = window.StormcloudVP.StormcloudVideoPlayer;
577
-
578
- var video = document.getElementById("video");
579
-
580
- var player = new StormcloudVideoPlayer({
581
- videoElement: video,
582
- src: "https://your-stream.com/playlist.m3u8",
583
- autoplay: true,
584
- muted: true,
585
- licenseKey: "your-license-key",
586
-
587
- prebid: {
588
- enabled: true,
589
- serverUrl: "https://prebid-server.example.com",
590
- timeout: 3000,
591
- debug: true,
592
- cpmFloor: 0.50,
593
- ortbRequest: {
594
- id: "my-video-player",
595
- imp: [
596
- {
597
- id: "video-imp-1",
598
- video: {
599
- w: 640,
600
- h: 480,
601
- mimes: ["video/mp4", "application/x-mpegURL"],
602
- protocols: [2, 5],
603
- minduration: 5,
604
- maxduration: 60,
605
- linearity: 1,
606
- playbackmethod: [1, 2],
607
- },
608
- ext: {
609
- prebid: {
610
- bidder: {
611
- appnexus: { placement_id: 12345 },
612
- },
613
- },
614
- },
615
- },
616
- ],
617
- tmax: 3000,
618
- },
619
- },
620
-
621
- debugAdTiming: true,
622
- });
623
-
624
- player.load();
625
- </script>
626
- ```
627
-
628
- **What happens:**
629
- - Sends OpenRTB 2.5 auction requests directly to your Prebid Server
630
- - Receives bid responses with VAST URLs (cached via Prebid Server) or inline VAST XML
631
- - Automatically selects the highest-CPM winning bid
632
- - Enforces CPM floor pricing (bids below the floor are rejected)
633
- - Plays the winning ad creative natively (MP4 or HLS)
634
- - Fires all VAST tracking events (impression, quartiles, complete, error, pause/resume, mute/unmute)
635
-
636
- **Auction Flow:**
637
- 1. Player builds an OpenRTB request with device/site info auto-populated from the browser
638
- 2. Request is sent to `{serverUrl}/openrtb2/auction` via POST
639
- 3. Prebid Server runs the server-side auction across all configured bidders
640
- 4. Player parses the response, selects the highest-CPM bid
641
- 5. VAST creative (cached URL or inline XML) is loaded and played
642
-
643
- **Benefits:**
644
- - Zero external SDK dependencies (no Google IMA, no Prebid.js client-side library)
645
- - Full server-side auction — lower client-side resource usage
646
- - Support for any Prebid Server bidder (AppNexus, Rubicon, Index Exchange, etc.)
647
- - CPM floor enforcement on the client side
648
- - Native VAST ad playback with full tracking support
649
- - Works on all platforms including Smart TVs and legacy browsers
650
- - Complete OpenRTB 2.5 compliance
651
-
652
- ### PrebidConfig Reference
653
-
654
- ```typescript
655
- interface PrebidConfig {
656
- enabled?: boolean; // Enable/disable prebid (default: true)
657
- serverUrl?: string; // Prebid Server URL (e.g. "https://prebid-server.example.com")
658
- ortbRequest: { // OpenRTB 2.5 request template
659
- id: string; // Request ID (will be made unique per auction)
660
- imp: [{ // Impression objects (at least one required)
661
- id: string;
662
- video?: {
663
- w?: number; // Video width
664
- h?: number; // Video height
665
- mimes?: string[]; // Supported MIME types
666
- protocols?: number[];
667
- minduration?: number;
668
- maxduration?: number;
669
- linearity?: number;
670
- playbackmethod?: number[];
671
- };
672
- ext?: {
673
- prebid?: {
674
- bidder: { // Bidder configurations
675
- [bidderName: string]: Record<string, any>;
676
- };
677
- };
678
- };
679
- }];
680
- tmax?: number; // Auction timeout in ms (default: 3000)
681
- site?: Record<string, any>; // Auto-populated from window.location if omitted
682
- device?: Record<string, any>; // Auto-populated from navigator if omitted
683
- ext?: Record<string, any>;
684
- };
685
- timeout?: number; // Client-side fetch timeout in ms (default: 3000)
686
- debug?: boolean; // Enable debug logging (default: false)
687
- cpmFloor?: number; // Minimum CPM to accept a bid (default: 0, accepts all)
688
- }
689
- ```
440
+ - Direct GAM VAST integration (no Prebid.js or OpenRTB SSP)
441
+ - Native MP4/HLS ad playback on CTV and web
442
+ - Optional license-based VAST tag resolution from backend
443
+ - Full VAST tracking support
690
444
 
691
445
  ### Ad Pod Generation (Multiple Consecutive Ads)
692
446
 
@@ -747,8 +501,6 @@ const player = new StormcloudVideoPlayer({
747
501
  videoElement: video,
748
502
  src: "https://your-live-stream.com/playlist.m3u8",
749
503
  licenseKey: "your-license-key",
750
-
751
- vastMode: 'default',
752
504
  debugAdTiming: true, // Enable to see adaptive calculations
753
505
  });
754
506
  ```
@@ -806,23 +558,20 @@ Final: 3 ads played (perfectly fills 120 seconds)
806
558
  - ✅ **Smart**: Improves calculation as more data is gathered (uses average of fetched durations)
807
559
  - ✅ **Self-Correcting**: Automatically adjusts if actual ad lengths differ from expectations
808
560
 
809
- ### Manual Ad Player Override
561
+ ### Manual VAST Tag Override
810
562
 
811
- You can still manually override the ad player type if needed:
563
+ You can customize the VAST tag URL when creating a `VastManager` via `createVastManager({ adstormApiUrl })` if your deployment resolves tags through a backend.
812
564
 
813
565
  ```javascript
814
566
  const player = new StormcloudVideoPlayer({
815
567
  videoElement: video,
816
568
  src: "https://your-stream.com/playlist.m3u8",
817
-
818
- vastMode: 'default',
819
- vastTagUrl: 'https://your-backend.com/vast', // Optional custom VAST URL
820
-
569
+ licenseKey: "your-license-key",
821
570
  debugAdTiming: true,
822
571
  });
823
572
  ```
824
573
 
825
- **Note:** The player uses Prebid Controller for ad playback. Provide `prebid` config for Prebid Server auctions.
574
+ **Note:** The player uses `createVastManager` and `createVastAdLayer` for GAM VAST ad playback.
826
575
 
827
576
  ### SCTE-35 Support
828
577
 
@@ -967,7 +716,6 @@ Example with error handling:
967
716
  ```javascript
968
717
  const player = new StormcloudVideoPlayer({
969
718
  // ... config
970
- vastMode: 'adstorm',
971
719
  debugAdTiming: true, // Enable detailed logging
972
720
  });
973
721
 
@@ -991,14 +739,11 @@ const player = new StormcloudVideoPlayer({
991
739
 
992
740
  Authenticated requests are sent to:
993
741
 
994
- - **AdStorm Mode** (`vastMode: 'adstorm'`):
995
- - VAST endpoint: `GET https://adstorm.co/api-adstorm-dev/adstorm/vast/{licenseKey}` (license key in URL path)
996
-
997
- - **Default Mode** (`vastMode: 'default'`):
998
- - Ad configuration: `GET https://adstorm.co/api-adstorm-dev/adstorm/ads/web` (requires `Authorization: Bearer {licenseKey}` header)
999
- - Returns VAST tag URL or Prebid Server provides creatives
742
+ - **VAST tag lookup** (when `licenseKey` is set):
743
+ - `GET https://adstorm.co/api-adstorm-dev/adstorm/ads/web` (requires `Authorization: Bearer {licenseKey}` header)
744
+ - Returns GAM VAST tag URL from `response.ima["publisherdesk.ima"].payload`
1000
745
 
1001
- - **Player Tracking** (both modes):
746
+ - **Player Tracking**:
1002
747
  - Player tracking: `POST https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/track` (requires `Authorization: Bearer {licenseKey}` header)
1003
748
  - Heartbeat monitoring: `POST https://adstorm.co/api-adstorm-dev/adstorm/player-tracking/heartbeat` (requires `Authorization: Bearer {licenseKey}` header)
1004
749
 
@@ -1166,8 +911,8 @@ src/
1166
911
  ├── ui/
1167
912
  │ └── StormcloudVideoPlayer.tsx # Legacy React component
1168
913
  ├── sdk/
1169
- │ ├── prebid.ts # Prebid Server auction manager
1170
- │ ├── prebidController.ts # Prebid ad controller (VAST playback + tracking)
914
+ │ ├── vastManager.ts # GAM VAST tag fetcher
915
+ │ ├── vastAdLayer.ts # VAST ad playback layer
1171
916
  │ └── vastParser.ts # VAST XML parser
1172
917
  ├── utils/
1173
918
  │ ├── tracking.ts # Analytics and tracking
@@ -1288,14 +1033,11 @@ Built with ❤️ by the Stormcloud team
1288
1033
 
1289
1034
  ### What's New in v0.5
1290
1035
 
1291
- - **Prebid Server Integration**: Server-side header bidding via Prebid Server (OpenRTB 2.5)
1292
- - **Zero-SDK Ad Auctions**: Run server-side auctions across multiple bidders (AppNexus, Rubicon, Index Exchange, etc.) without any client-side ad SDK
1293
- - **PrebidConfig**: Full OpenRTB 2.5 request configuration with auto-populated device/site fields
1294
- - **CPM Floor Enforcement**: Client-side floor pricing to reject bids below a minimum CPM threshold
1295
- - **Native VAST Playback**: Winning bid creatives (cached VAST URL or inline VAST XML) played natively with full tracking (impression, quartiles, complete, pause/resume, mute/unmute, error)
1036
+ - **GAM VAST Integration**: Direct Google Ad Manager VAST tag fetching and native ad playback
1037
+ - **Native VAST Playback**: MP4/HLS creatives played with full tracking (impression, quartiles, complete, pause/resume, mute/unmute, error)
1296
1038
  - **Smart Media Selection**: Automatic selection of the best ad media file based on the main stream's current resolution and bitrate
1297
1039
  - **HLS Ad Creatives**: Support for HLS-format ad creatives alongside MP4, with automatic format detection
1298
- - **CDN-Ready**: Full prebid support available via CDN (`window.StormcloudVP.StormcloudVideoPlayer`) with no build step required
1040
+ - **CDN-Ready**: Full player available via CDN (`window.StormcloudVP.StormcloudVideoPlayer`) with no build step required
1299
1041
 
1300
1042
  ### What's New in v0.4
1301
1043
 
@@ -1320,14 +1062,11 @@ Built with ❤️ by the Stormcloud team
1320
1062
 
1321
1063
  ### What's New in v0.3
1322
1064
 
1323
- - 🎬 **Prebid Ad Controller**: VAST ad playback via Prebid Server
1324
- - 🎯 **Ad Integration**: Prebid Server for server-side header bidding
1325
- - 📊 **Direct Analytics**: Full control over ad tracking and metrics
1065
+ - 🎬 **VAST Ad Layer**: GAM VAST ad playback with full tracking
1066
+ - 🎯 **Ad Integration**: Direct GAM VAST tag fetching during SCTE-35 breaks
1067
+ - 📊 **Direct Analytics**: MQTT-based player tracking and metrics
1326
1068
  - ⚡ **Better Performance**: Native VAST playback for ads
1327
- - 🔧 **Custom VAST URLs**: Point to your own ad serving backend
1328
- - 📦 **Zero Dependencies**: No external ad SDKs (Prebid Server only)
1329
1069
  - 🎨 **Seamless Playback**: Same player for content and ads
1330
- - 🔀 **VAST Mode**: `vastMode` property for endpoint configuration
1331
1070
  - ⚠️ **Improved Error Handling**: Distinguishes between parsing errors and "no ads available" scenarios
1332
1071
  - Logs warnings for "no ads available" (graceful handling)
1333
1072
  - Logs errors for actual parsing/fetch failures