🎬 Video Player SDK - Client Usage Example

📋 How to Use This SDK (Client Perspective)

Step 1: Include the SDK in your HTML

<!-- Option 1: CDN (Easiest) -->
<script src="https://unpkg.com/ads-reels-player@latest/dist/index.umd.js"></script>

<!-- Option 2: Local file -->
<script src="./node_modules/ads-reels-player/dist/index.umd.js"></script>
            

Step 2: Use the SDK in your JavaScript

// Basic usage
const player = new VideoPlayerSDK({ key: 'demo-1' });
player.init();
            

🧪 Live Demo - Try These Examples

1. Basic Video Player

Simple video player with predefined content:

const player = new VideoPlayerSDK({
    key: 'demo-1',
    position: 'bottom-right',
    width: '320px',
    height: '480px'
});
player.init();
            

2. Multiple Videos with Navigation

Player with multiple videos and navigation controls:

const player = new VideoPlayerSDK({
    keys: ['demo-1', 'demo-2', 'demo-3'],
    position: 'center',
    width: '350px',
    height: '500px',
    showNavigation: true,
    onVideoChange: (videoData, index) => {
        console.log('Now playing:', videoData.title);
    }
});
player.init();
            

3. Custom Video Content

Player with your own video content:

const player = new VideoPlayerSDK({
    videoData: {
        video: 'https://example.com/your-video.mp4',
        title: 'Your Video Title',
        video_routing_link: 'https://example.com/action',
        button_text: 'Click Here'
    },
    position: 'bottom-left',
    width: '300px',
    height: '450px'
});
player.init();
            

4. With Callbacks and Events

Player with event handling and callbacks:

const player = new VideoPlayerSDK({
    key: 'demo-1',
    onClose: () => {
        console.log('User closed the player');
        // Handle close event
    },
    onNavigate: (url) => {
        console.log('User clicked action button:', url);
        // Handle navigation
        window.open(url, '_blank');
    },
    onVideoChange: (videoData, index) => {
        console.log('Video changed:', videoData.title);
        // Handle video change
    },
    onError: (error) => {
        console.error('Player error:', error);
        // Handle errors
    }
});
player.init();
            

📋 Available Video Keys

demo-1 - "Discover Amazing Features - Limited Time Offer"
demo-2 - "New Collection Launch - Get 20% Off"
demo-3 - "Join Our Community - Exclusive Benefits"
video-1 - "Big Buck Bunny"
video-2 - "Elephants Dream"
video-3 - "For Bigger Blazes"

🎨 Positioning Options

position: 'bottom-right'  // Default
position: 'top-left'
position: 'top-right'
position: 'bottom-left'
position: 'center'
        

🎮 Player Controls

// Initialize
await player.init();

// Navigate videos (for multiple videos)
player.nextVideo();
player.previousVideo();

// Close the player
player.close();

// Update position
player.updatePosition('top-left');

// Update size
player.updateSize('400px', '600px');

// Get current state
const currentVideo = player.getCurrentVideo();
const currentIndex = player.getCurrentIndex();
const videoList = player.getVideoList();
        