VideoStream Pro - Next.js SDK

Professional video player library for Next.js with VAST advertising support.

Installation

npm install @videostream-pro/nextjs
# or
yarn add @videostream-pro/nextjs
# or
pnpm add @videostream-pro/nextjs

Features

• ✅ Next.js App Router compatible (with 'use client')
• ✅ Next.js Pages Router compatible
• ✅ React 18+ support
• ✅ TypeScript definitions included
• ✅ VAST advertising integration
• ✅ Google IMA SDK support
• ✅ Tree-shakeable ESM bundle
• ✅ No React bundled (peer dependency)

Quick Start

Next.js App Router (13+)

// app/video-player/page.tsx
'use client';

import { VideoPlayer } from '@videostream-pro/nextjs';

export default function VideoPage() {
  const video = {
    id: 'demo',
    title: 'Sample Video',
    objectPath: 'https://example.com/video.mp4'
  };

  return (
    <div className="container mx-auto p-4">
      <VideoPlayer
        video={video}
        aspectRatio="16:9"
        controls={true}
        ads={true}
      />
    </div>
  );
}

Next.js Pages Router

// pages/video.tsx
import { VideoPlayer } from '@videostream-pro/nextjs';
import type { NextPage } from 'next';

const VideoPage: NextPage = () => {
  const video = {
    id: 'demo',
    title: 'Sample Video',
    objectPath: 'https://example.com/video.mp4'
  };

  return (
    <div className="container mx-auto p-4">
      <VideoPlayer
        video={video}
        aspectRatio="16:9"
        controls={true}
      />
    </div>
  );
};

export default VideoPage;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | video | Video | - | Video object with metadata | | src | string | - | Direct video URL (alternative to video object) | | aspectRatio | '16:9' \| '4:3' \| '1:1' \| '21:9' | '16:9' | Video aspect ratio | | controls | boolean | true | Show video controls | | autoPlay | boolean | false | Auto-play video | | ads | boolean | false | Enable VAST advertising | | vastTagUrl | string | - | VAST tag URL for ads | | onPlay | () => void | - | Called when video plays | | onPause | () => void | - | Called when video pauses | | onEnded | () => void | - | Called when video ends |

With VAST Advertising

<VideoPlayer
  video={video}
  ads={true}
  vastTagUrl="https://pubads.g.doubleclick.net/gampad/ads?..."
  onAdStart={() => console.log('Ad started')}
  onAdComplete={() => console.log('Ad completed')}
/>

TypeScript

Full TypeScript support with type definitions included:

import { VideoPlayer, VideoPlayerProps, Video } from '@videostream-pro/nextjs';

Browser Compatibility

• Chrome 80+
• Firefox 74+
• Safari 13.1+
• Edge 80+

License

MIT