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
209 lines (186 loc) • 6.62 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 - Browser 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);
}
h1 {
color: #333;
text-align: center;
}
.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 - Browser Usage Example</h1>
<div class="info">
<h3>📋 How to Use This SDK</h3>
<p><strong>Step 1:</strong> Install the package</p>
<div class="code-block">
npm install ads-reels-player
</div>
<p><strong>Step 2:</strong> Create an HTML file (like this one)</p>
<p><strong>Step 3:</strong> Include the SDK and use it</p>
</div>
<div class="code-block">
<!-- Include the SDK -->
<script src="./node_modules/ads-reels-player/dist/index.umd.js"></script>
<!-- OR use CDN -->
<script src="https://unpkg.com/ads-reels-player@latest/dist/index.umd.js"></script>
<script>
// Create and use the player
const player = new VideoPlayerSDK({
key: 'demo-1',
position: 'bottom-right',
width: '320px',
height: '480px'
});
player.init();
</script>
</div>
<h3>🧪 Live Demo</h3>
<button onclick="demoPlayer()">🚀 Show Video Player</button>
<button onclick="closePlayer()">❌ Close Player</button>
<div id="status"></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>🎯 Usage Examples</h3>
<h4>Basic Usage</h4>
<div class="code-block">
const player = new VideoPlayerSDK({ key: 'demo-1' });
player.init();
</div>
<h4>Multiple Videos</h4>
<div class="code-block">
const player = new VideoPlayerSDK({
keys: ['demo-1', 'demo-2', 'demo-3'],
showNavigation: true,
position: 'center'
});
player.init();
</div>
<h4>Custom Video</h4>
<div class="code-block">
const player = new VideoPlayerSDK({
videoData: {
video: 'https://example.com/video.mp4',
title: 'My Video Title',
video_routing_link: 'https://example.com/action',
button_text: 'Click Here'
}
});
player.init();
</h4>
<h4>With Callbacks</h4>
<div class="code-block">
const player = new VideoPlayerSDK({
key: 'demo-1',
onClose: () => console.log('Player closed'),
onNavigate: (url) => window.open(url, '_blank'),
onVideoChange: (videoData, index) => console.log(`Playing: ${videoData.title}`)
});
player.init();
</div>
</div>
<!-- Include the SDK -->
<script src="./dist/index.umd.js"></script>
<script>
let currentPlayer = null;
function showStatus(message, isError = false) {
const status = document.getElementById('status');
status.innerHTML = `<div class="status ${isError ? 'error' : 'success'}">${message}</div>`;
}
function demoPlayer() {
try {
if (currentPlayer) {
currentPlayer.close();
}
// Check if VideoPlayerSDK is available
if (typeof VideoPlayerSDK === 'undefined') {
showStatus('❌ VideoPlayerSDK not found. Make sure the script is loaded.', true);
return;
}
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('✅ Video player loaded successfully!');
} catch (error) {
showStatus(`❌ Error: ${error.message}`, true);
}
}
function closePlayer() {
if (currentPlayer) {
currentPlayer.close();
currentPlayer = null;
showStatus('✅ Player closed');
}
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
showStatus('Ready to test VideoPlayerSDK');
});
</script>
</body>
</html>