QUICKSTART.md

🚀 Quick Start Guide

Get up and running in 5 minutes!

Option 1: View Demo Locally

1. Clone or download this repository
2. Open index.html in your web browser
3. Explore the landing page and click "Launch Player"
4. Watch demo videos (uses placeholder videos)

That's it! The project works out of the box with demo content.

Option 2: Connect to Cloudflare Stream

Prerequisites

• Cloudflare account (sign up at cloudflare.com)
• Videos uploaded to Cloudflare Stream

Setup Steps

1. Copy the config file:

   cp js/config.example.js js/config.js

2. Edit js/config.js with your credentials:

   ACCOUNT_ID: 'your-cloudflare-account-id',
   API_TOKEN: 'your-cloudflare-api-token',

3. Upload your videos to Cloudflare Stream:

   • Go to Cloudflare dashboard → Stream
   • Click Upload and select videos
   • Copy the Video IDs

4. Update video IDs in js/config.js:

   DEMO_VIDEOS: [
       {
           id: 'your-video-id-here',
           title: 'Your Video Title',
           description: 'Description...'
       }
   ]

5. Start a local server:

   # Python 3
   python -m http.server 8000
   
   # Or use any web server

6. Open http://localhost:8000 in your browser

Features Overview

✅ Landing Page - Educational content about video streaming
✅ Video Player - Custom controls with keyboard shortcuts
✅ Cloudflare Integration - Connect to Cloudflare Stream API
✅ Particle Effects - Matrix-style green animated background
✅ Dark/Light Mode - Toggle between themes
✅ Responsive Design - Works on all devices

Keyboard Shortcuts

• Space or K - Play/Pause
• F - Fullscreen
• M - Mute/Unmute
• ←/→ - Seek backward/forward 5 seconds
• ↑/↓ - Volume up/down
• 0-9 - Jump to 0%-90% of video

Next Steps

• Read the full Setup Guide
• Customize colors in css/main.css
• Add your branding and logo
• Deploy to Cloudflare Pages, Netlify, or Vercel

Need Help?

• Check the Setup Guide for detailed instructions
• Read the Cloudflare Stream Documentation
• Open an issue on GitHub

---

Happy Streaming! 🎥