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
362 lines (324 loc) • 13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player SDK - Client Usage Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.code-block {
background: #f1f1f1;
padding: 15px;
border-radius: 5px;
font-family: monospace;
margin: 15px 0;
overflow-x: auto;
}
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; }
.info { background: #d1ecf1; color: #0c5460; }
</style>
</head>
<body>
<div class="container">
<h1>🎬 Video Player SDK - Client Usage Example</h1>
<div class="info">
<h3>📋 How to Use This SDK (Client Perspective)</h3>
<p><strong>Step 1:</strong> Include the SDK in your HTML</p>
<div class="code-block">
<!-- 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>
</div>
<p><strong>Step 2:</strong> Use the SDK in your JavaScript</p>
<div class="code-block">
// Basic usage
const player = new VideoPlayerSDK({ key: 'demo-1' });
player.init();
</div>
</div>
<h3>🧪 Live Demo - Try These Examples</h3>
<div class="demo-section">
<h4>1. Basic Video Player</h4>
<p>Simple video player with predefined content:</p>
<div class="code-block">
const player = new VideoPlayerSDK({
key: 'demo-1',
position: 'bottom-right',
width: '320px',
height: '480px'
});
player.init();
</div>
<button onclick="demoBasic()">🚀 Show Basic Player</button>
<button onclick="closePlayer()">❌ Close</button>
<div id="basic-status"></div>
</div>
<div class="demo-section">
<h4>2. Multiple Videos with Navigation</h4>
<p>Player with multiple videos and navigation controls:</p>
<div class="code-block">
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();
</div>
<button onclick="demoMultiple()">🎬 Show Multiple Videos</button>
<button onclick="closePlayer()">❌ Close</button>
<div id="multiple-status"></div>
</div>
<div class="demo-section">
<h4>3. Custom Video Content</h4>
<p>Player with your own video content:</p>
<div class="code-block">
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();
</div>
<button onclick="demoCustom()">🎥 Show Custom Video</button>
<button onclick="closePlayer()">❌ Close</button>
<div id="custom-status"></div>
</div>
<div class="demo-section">
<h4>4. With Callbacks and Events</h4>
<p>Player with event handling and callbacks:</p>
<div class="code-block">
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();
</div>
<button onclick="demoWithCallbacks()">🎯 Show with Callbacks</button>
<button onclick="closePlayer()">❌ Close</button>
<div id="callback-status"></div>
</div>
<h3>📋 Available Video Keys</h3>
<ul>
<li><strong>demo-1</strong> - "Discover Amazing Features - Limited Time Offer"</li>
<li><strong>demo-2</strong> - "New Collection Launch - Get 20% Off"</li>
<li><strong>demo-3</strong> - "Join Our Community - Exclusive Benefits"</li>
<li><strong>video-1</strong> - "Big Buck Bunny"</li>
<li><strong>video-2</strong> - "Elephants Dream"</li>
<li><strong>video-3</strong> - "For Bigger Blazes"</li>
</ul>
<h3>🎨 Positioning Options</h3>
<div class="code-block">
position: 'bottom-right' // Default
position: 'top-left'
position: 'top-right'
position: 'bottom-left'
position: 'center'
</div>
<h3>🎮 Player Controls</h3>
<div class="code-block">
// 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();
</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(elementId, message, isError = false) {
const element = document.getElementById(elementId);
element.innerHTML = `<div class="status ${isError ? 'error' : 'success'}">${message}</div>`;
}
function closePlayer() {
if (currentPlayer) {
currentPlayer.close();
currentPlayer = null;
showStatus('basic-status', 'Player closed');
showStatus('multiple-status', 'Player closed');
showStatus('custom-status', 'Player closed');
showStatus('callback-status', 'Player closed');
}
}
function demoBasic() {
try {
if (currentPlayer) currentPlayer.close();
currentPlayer = new VideoPlayerSDK({
key: 'demo-1',
position: 'bottom-right',
width: '320px',
height: '480px',
onClose: () => {
showStatus('basic-status', '✅ Player closed by user');
currentPlayer = null;
}
});
currentPlayer.init();
showStatus('basic-status', '✅ Basic video player loaded!');
} catch (error) {
showStatus('basic-status', `❌ Error: ${error.message}`, true);
}
}
function demoMultiple() {
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('multiple-status', `🎬 Now playing: ${videoData.title} (${index + 1}/3)`);
},
onClose: () => {
showStatus('multiple-status', '✅ Player closed by user');
currentPlayer = null;
}
});
currentPlayer.init();
showStatus('multiple-status', '✅ Multiple videos loaded! Use navigation buttons.');
} catch (error) {
showStatus('multiple-status', `❌ Error: ${error.message}`, true);
}
}
function demoCustom() {
try {
if (currentPlayer) currentPlayer.close();
currentPlayer = new VideoPlayerSDK({
videoData: {
video: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
title: 'Big Buck Bunny - Custom Video',
video_routing_link: 'https://www.example.com/bunny',
button_text: 'Watch Full Movie'
},
position: 'bottom-left',
width: '300px',
height: '450px',
onClose: () => {
showStatus('custom-status', '✅ Player closed by user');
currentPlayer = null;
},
onNavigate: (url) => {
showStatus('custom-status', `🔗 Custom navigation: ${url}`);
}
});
currentPlayer.init();
showStatus('custom-status', '✅ Custom video loaded!');
} catch (error) {
showStatus('custom-status', `❌ Error: ${error.message}`, true);
}
}
function demoWithCallbacks() {
try {
if (currentPlayer) currentPlayer.close();
currentPlayer = new VideoPlayerSDK({
key: 'demo-1',
position: 'top-right',
width: '300px',
height: '450px',
onClose: () => {
showStatus('callback-status', '✅ Player closed by user');
currentPlayer = null;
},
onNavigate: (url) => {
showStatus('callback-status', `🔗 Navigation clicked: ${url}`);
// Simulate opening in new tab
setTimeout(() => {
showStatus('callback-status', '🔗 Would open: ' + url);
}, 1000);
},
onVideoChange: (videoData, index) => {
showStatus('callback-status', `🎬 Video changed: ${videoData.title}`);
},
onError: (error) => {
showStatus('callback-status', `❌ Error: ${error.message}`, true);
}
});
currentPlayer.init();
showStatus('callback-status', '✅ Player with callbacks loaded!');
} catch (error) {
showStatus('callback-status', `❌ Error: ${error.message}`, true);
}
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
showStatus('basic-status', 'Ready to test basic player');
showStatus('multiple-status', 'Ready to test multiple videos');
showStatus('custom-status', 'Ready to test custom video');
showStatus('callback-status', 'Ready to test with callbacks');
});
</script>
</body>
</html>