ads-reels-player
Version:
A lightweight, customizable ads and reels video player SDK for modern web applications. Works like Mux with video keys, supports React, Vue, Angular, and vanilla JavaScript. Framework agnostic video player with Mux-like functionality. Browser-only SDK wit
241 lines (208 loc) ā¢ 8.77 kB
JavaScript
// š¬ Video Player SDK - Single JavaScript File
// This demonstrates why the SDK cannot work in Node.js and provides solutions
console.log('š Video Player SDK - Single JS File Test\n');
// Check if we're in Node.js or Browser
const isNode = typeof process !== 'undefined' && process.versions && process.versions.node;
const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
console.log('Environment Detection:');
console.log('- Node.js:', isNode ? 'ā
Yes' : 'ā No');
console.log('- Browser:', isBrowser ? 'ā
Yes' : 'ā No');
console.log('');
if (isNode) {
console.log('ā PROBLEM: This SDK requires a browser environment!');
console.log('The SDK needs DOM APIs (document, window) which are not available in Node.js.\n');
console.log('š§ SOLUTIONS:');
console.log('');
console.log('1. š Create HTML file and open in browser:');
console.log(' - Create index.html with the SDK');
console.log(' - Open in browser');
console.log('');
console.log('2. š Use a simple HTTP server:');
console.log(' - Run: node server.js');
console.log(' - Open http://localhost:3000 in browser');
console.log('');
console.log('3. š± Use a headless browser (Puppeteer):');
console.log(' - Install: npm install puppeteer');
console.log(' - Run the SDK in a headless browser');
console.log('');
console.log('4. š Use a browser automation tool:');
console.log(' - Playwright, Selenium, etc.');
console.log('');
// Create HTML file automatically
console.log('š Creating HTML file for you...');
const htmlContent = `
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player SDK - Auto Generated</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f0f0f0;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #0056b3;
}
.status {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
font-weight: bold;
}
.success { background: #d4edda; color: #155724; }
.error { background: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<div class="container">
<h1>š¬ Video Player SDK - Working!</h1>
<p>This HTML file was created by index.js</p>
<button onclick="showPlayer()">š Show Video Player</button>
<button onclick="closePlayer()">ā Close Player</button>
<button onclick="showMultipleVideos()">š¬ Show Multiple Videos</button>
<div id="status" class="status">Ready to test</div>
</div>
<!-- Include SDK from CDN -->
<script src="https://unpkg.com/ads-reels-player@latest/dist/index.umd.js"></script>
<script>
let currentPlayer = null;
function showStatus(message, isError = false) {
const status = document.getElementById('status');
status.innerHTML = message;
status.className = 'status ' + (isError ? 'error' : 'success');
}
function showPlayer() {
try {
if (currentPlayer) currentPlayer.close();
currentPlayer = new VideoPlayerSDK({
key: 'demo-1',
position: 'bottom-right',
width: '320px',
height: '480px',
onClose: () => {
showStatus('ā
Player closed by user');
currentPlayer = null;
},
onNavigate: (url) => {
showStatus('š Navigation clicked: ' + url);
}
});
currentPlayer.init();
showStatus('ā
Basic video player loaded!');
} catch (error) {
showStatus('ā Error: ' + error.message, true);
}
}
function showMultipleVideos() {
try {
if (currentPlayer) currentPlayer.close();
currentPlayer = new VideoPlayerSDK({
keys: ['demo-1', 'demo-2', 'demo-3'],
position: 'center',
width: '350px',
height: '500px',
showNavigation: true,
onVideoChange: (videoData, index) => {
showStatus('š¬ Now playing: ' + videoData.title + ' (' + (index + 1) + '/3)');
},
onClose: () => {
showStatus('ā
Player closed by user');
currentPlayer = null;
}
});
currentPlayer.init();
showStatus('ā
Multiple videos loaded! Use navigation buttons.');
} catch (error) {
showStatus('ā Error: ' + error.message, true);
}
}
function closePlayer() {
if (currentPlayer) {
currentPlayer.close();
currentPlayer = null;
showStatus('ā
Player closed');
}
}
// Initialize
showStatus('Ready to test VideoPlayerSDK');
</script>
</body>
</html>`;
// Write HTML file
import('fs').then(fs => {
fs.writeFileSync('video-player-demo.html', htmlContent);
console.log('ā
Created video-player-demo.html');
console.log('š Open this file in your browser to see the SDK working!');
console.log('');
// Create a simple server
console.log('š Creating simple server...');
const serverContent = `import http from 'http';
import fs from 'fs';
const server = http.createServer((req, res) => {
if (req.url === '/') {
const html = fs.readFileSync('video-player-demo.html', 'utf8');
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(html);
} else {
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('Not found');
}
});
const PORT = 3000;
server.listen(PORT, () => {
console.log('š Server running at http://localhost:' + PORT);
console.log('š Open this URL in your browser to see the SDK working!');
});`;
fs.writeFileSync('server.js', serverContent);
console.log('ā
Created server.js');
console.log('š Run: node server.js');
console.log('š Then open: http://localhost:3000');
console.log('');
console.log('š Summary:');
console.log('- The SDK cannot run directly in Node.js');
console.log('- It needs a browser environment');
console.log('- I created HTML file and server for you');
console.log('- Open the HTML file or run the server');
});
} else if (isBrowser) {
console.log('ā
Browser environment detected!');
console.log('š¬ The SDK can work here, but you need to include it first.');
console.log('');
console.log('To use the SDK in browser:');
console.log('1. Include the SDK script');
console.log('2. Create VideoPlayerSDK instance');
console.log('3. Call init() method');
console.log('');
console.log('Example:');
console.log('const player = new VideoPlayerSDK({ key: "demo-1" });');
console.log('player.init();');
} else {
console.log('ā Unknown environment');
console.log('This script should be run in Node.js or Browser');
}
console.log('\nš For more information:');
console.log('- README.md - Complete documentation');
console.log('- SETUP_GUIDE.md - Setup instructions');
console.log('- USAGE_GUIDE.md - Usage examples');
console.log('- simple-demo.html - Working demo');
console.log('- browser-usage-example.html - Comprehensive demo');