🎥 Video Streaming Integration Project

Overview

An educational project demonstrating how to build a video streaming platform using Cloudflare as the hosting provider. This project showcases end-to-end integration of cloud-based video delivery with a custom web-based player.

🎯 Project Goals

• Build a functional video streaming webpage
• Integrate with Cloudflare Stream API
• Create a custom video player with modern controls
• Demonstrate cloud-based video hosting best practices
• Educate students on streaming platform architecture

🛠 Technologies Used

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Video Hosting: Cloudflare Stream
• API Integration: Cloudflare Stream API
• Design: Programmer-inspired theme with particle effects
• Features: Dark/Light mode toggle

📁 Project Structure

Video-Streaming-Integration/
├── index.html              # Landing page with educational content
├── player.html             # Video player page
├── css/
│   ├── main.css           # Main styles
│   ├── landing.css        # Landing page styles
│   ├── player.css         # Video player styles
│   └── particles.css      # Particle effect styles
├── js/
│   ├── main.js            # Main JavaScript
│   ├── cloudflare-api.js  # Cloudflare API integration
│   ├── video-player.js    # Custom video player controls
│   ├── particles.js       # Particle animation
│   └── theme-toggle.js    # Dark/Light mode toggle
├── assets/
│   └── images/            # Project images
└── docs/
    └── setup-guide.md     # Setup and configuration guide

🚀 Getting Started

Prerequisites

• Cloudflare account with Stream enabled
• Basic knowledge of HTML, CSS, JavaScript
• Modern web browser

Setup Instructions

1. Clone this repository
2. Configure your Cloudflare API credentials in js/config.js
3. Open index.html in your browser
4. Upload videos to Cloudflare Stream
5. Update video IDs in the player configuration

Cloudflare Stream Setup

1. Sign up for Cloudflare Stream at https://www.cloudflare.com/products/cloudflare-stream/
2. Navigate to Stream in your Cloudflare dashboard
3. Upload your videos
4. Get your Account ID and API Token
5. Copy video IDs for embedding

📚 Educational Content

This project teaches:

• Video streaming protocols and delivery
• Cloud-based hosting vs self-hosting
• API integration best practices
• Frontend video player development
• Responsive web design
• State management (theme toggling)

🎨 Features

• ✅ Custom video player with full controls
• ✅ Ocean blue particle effect background (Modern style)
• ✅ Dark/Light mode toggle
• ✅ Responsive design for all devices
• ✅ Cloudflare Stream API integration
• ✅ Educational landing page
• ✅ Video quality selection
• ✅ Fullscreen support
• ✅ Keyboard shortcuts

🌐 Alternative Hosting Options

• Cloudflare Stream: Best for production, CDN-backed
• AWS S3 + CloudFront: More control, higher complexity
• Vimeo: Easy integration, paid plans
• YouTube: Free but limited customization
• Self-hosted: Maximum control, requires infrastructure

📖 Documentation

See /docs/setup-guide.md for detailed setup instructions and API documentation.

🤝 Contributing

This is an educational project. Feel free to fork, modify, and learn!

📄 License

MIT License - Free to use for educational purposes

👨‍💻 Author

Built as an educational demonstration project

---

Note: This project requires a Cloudflare Stream account. Free tier available for testing.