JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 20
  • Score
    100M100P100Q61968F
  • License MIT

A lightweight, customizable ads and reels video player SDK for modern web applications - works in both browser and Node.js

Package Exports

  • ads-reels-player
  • ads-reels-player/browser
  • ads-reels-player/node

Readme

🎬 Ads Reels Player SDK

A lightweight, customizable ads and reels video player SDK that works in both browser and Node.js environments.

✨ Features

  • 🌐 Universal: Works in browser and Node.js
  • 📱 Responsive: Mobile-first design
  • 🎨 Customizable: Position, size, styling
  • 🚀 Easy Integration: Just a few lines of code
  • 📦 Lightweight: Minimal bundle size
  • 🔧 TypeScript: Full type definitions
  • 🎯 API Integration: Works with your existing API
  • 🛡️ Fallback Support: Graceful error handling

🚀 Quick Start

Browser Usage

<!DOCTYPE html>
<html>
<head>
    <title>My Video Player</title>
</head>
<body>
    <button onclick="showVideo()">Show Video Player</button>
    
    <script src="https://cdn.jsdelivr.net/npm/ads-reels-player@1.0.0/dist/index.umd.js"></script>
    <script>
        function showVideo() {
            const player = new VideoPlayerSDK.VideoPlayerSDK({
                uniqueId: 'my-video',
                apiEndpoint: 'http://13.200.65.39:5000/api/video',
                position: 'bottom-right',
                width: '320px',
                height: '480px'
            });
            player.init();
        }
    </script>
</body>
</html>

Node.js Usage

import { NodeVideoPlayerSDK } from 'ads-reels-player';

const sdk = new NodeVideoPlayerSDK({
    apiEndpoint: 'http://13.200.65.39:5000/api/video'
});

// Generate HTML for video player
const playerHTML = await sdk.generatePlayerHTML('default', {
    position: 'center',
    width: '400px',
    height: '600px'
});

console.log(playerHTML.complete); // Complete HTML with CSS and JS

Express.js Integration

import express from 'express';
import { NodeVideoPlayerSDK } from 'ads-reels-player';

const app = express();
const sdk = new NodeVideoPlayerSDK();

app.get('/video-player/:id', async (req, res) => {
    const playerHTML = await sdk.generatePlayerHTML(req.params.id);
    res.send(`
        <!DOCTYPE html>
        <html>
        <body>
            <h1>My Website</h1>
            ${playerHTML.complete}
        </body>
        </html>
    `);
});

app.listen(3000);

📦 Installation

npm install ads-reels-player

🎯 API Reference

Browser SDK

VideoPlayerSDK Class

const player = new VideoPlayerSDK.VideoPlayerSDK({
    uniqueId: 'video-id',           // Required: Unique video identifier
    apiEndpoint: '/api/video',      // API endpoint (default: '/api/video')
    position: 'bottom-right',       // Position on screen
    width: '320px',                 // Player width
    height: '480px',                // Player height
    autoPlay: true,                 // Auto-play video (default: true)
    showCloseButton: true,          // Show close button (default: true)
    onClose: () => {},              // Callback when player closes
    onNavigate: (url) => {}         // Callback when action button clicked
});

Methods

  • player.init() - Initialize and show the player
  • player.close() - Close the player
  • player.updatePosition(position) - Update player position
  • player.updateSize(width, height) - Update player dimensions
  • player.destroy() - Destroy the player instance

Node.js SDK

NodeVideoPlayerSDK Class

const sdk = new NodeVideoPlayerSDK({
    apiEndpoint: '/api/video',      // API endpoint
    defaultPosition: 'bottom-right', // Default position
    defaultWidth: '320px',          // Default width
    defaultHeight: '480px',         // Default height
    defaultAutoPlay: true,          // Default auto-play
    defaultShowCloseButton: true    // Default show close button
});

Methods

  • sdk.fetchVideoData(uniqueId, apiEndpoint?) - Fetch video data from API
  • sdk.generatePlayerHTML(uniqueId, config?) - Generate complete HTML
  • sdk.generateCSS(config) - Generate CSS styles
  • sdk.generateHTML(videoData, config) - Generate HTML structure
  • sdk.generateJavaScript(config) - Generate JavaScript code
  • sdk.validateVideoData(data) - Validate video data structure
  • sdk.createMockVideoData(overrides?) - Create mock video data

🎨 Positioning Options

Predefined Positions

  • top-left - Top left corner
  • top-right - Top right corner
  • bottom-left - Bottom left corner
  • bottom-right - Bottom right corner (default)
  • center - Center of screen

Custom Positioning

position: 'custom',
customPosition: {
    top: '100px',
    left: '50px'
}

📡 API Response Format

Your API endpoint should return video data in this format:

{
    "video": "https://example.com/video.mp4",
    "title": "Video Title",
    "video_routing_link": "https://example.com/action",
    "button_text": "Click Here"
}

🧪 Demo & Examples

Browser Demos

  • minimal-example.html - Absolute minimal example
  • super-simple-demo.html - Comprehensive browser demo
  • demo.html - Basic integration demo

Node.js Demos

  • node-demo.js - Node.js SDK demonstration
  • express-demo.js - Express.js integration example
  • test-node-sdk.js - Simple Node.js test

Running Demos

# Browser demos - just open the HTML files
open minimal-example.html

# Node.js demo
npm run demo:node

# Express.js demo (requires express)
node express-demo.js

🔧 Configuration

Browser Configuration

const config = {
    uniqueId: 'my-video',
    apiEndpoint: 'http://13.200.65.39:5000/api/video',
    position: 'center',
    width: '400px',
    height: '600px',
    autoPlay: true,
    showCloseButton: true,
    onClose: () => {
        console.log('Player closed');
    },
    onNavigate: (url) => {
        console.log('User clicked action button:', url);
        window.open(url, '_blank');
    }
};

Node.js Configuration

const config = {
    apiEndpoint: 'http://13.200.65.39:5000/api/video',
    defaultPosition: 'bottom-right',
    defaultWidth: '320px',
    defaultHeight: '480px',
    defaultAutoPlay: true,
    defaultShowCloseButton: true
};

🛠️ Development

Building

# Build for browser
npm run build:lib

# Build for Node.js
npm run build:node

# Build both
npm run build

Testing

# Test Node.js SDK
node test-node-sdk.js

# Test with your API
node node-demo.js

📋 Browser Support

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

🎉 Changelog

v1.0.0

  • Initial release
  • Browser and Node.js support
  • Universal package structure
  • TypeScript definitions
  • Comprehensive demos and examples