AniStream - Modern M3U8 Player

A sleek, modern M3U8 streaming player with beautiful UI and smooth performance

✨ Features

Feature	Description	Emoji
Ad-Free Streaming	Enjoy content without interruptions	🚫
Modern UI/UX	Clean, minimalist design with smooth animations	🎨
Particle Background	Interactive particle effects for immersive experience	✨
Cross-Platform	Works on desktop, tablet, and mobile	📱
Fast Loading	Optimized for quick streaming performance	⚡
Easy to Use	Simple interface - just paste and play	🎯

🚀 Quick Start

Method 1: Direct Usage

# Simply visit the live demo
https://shineii86.github.io/AniStream/

Method 2: Local Deployment

# Clone the repository
git clone https://github.com/Shineii86/AniStream.git

# Navigate to directory
cd AniStream

# Open index.html in your browser
# That's it! No build process required

🎮 How to Use

1. Open the Player: Visit the live demo or open index.html
2. Paste M3U8 URL: Copy your M3U8 stream URL
3. Click Stream Now: The player will load your content instantly
4. Enjoy: Watch your stream with full controls

// Example M3U8 URL format
https://example.com/stream/playlist.m3u8

🛠️ Customization

Color Scheme

Edit the CSS variables in :root section:

:root {
    --primary: #8B5CF6;      /* Main purple color */
    --primary-dark: #7C3AED; /* Darker purple */
    --dark: #0F0F0F;         /* Background color */
    --light: #F5F5F5;        /* Text color */
    /* Add your custom colors here */
}

Particle Effects

Customize the particle background in the JavaScript section:

particlesJS('particles-js', {
    particles: {
        number: { value: 80 },        // Number of particles
        color: { value: "#8B5CF6" },  // Particle color
        size: { value: 3 },           // Particle size
        // More customization options...
    }
});

Player Settings

Modify player behavior in the script section:

// Auto-play configuration
video.play().catch(e => console.log('Autoplay prevented:', e));

// Error handling
video.addEventListener('error', function() {
    alert('Error loading video. Please check the URL.');
});

📁 Project Structure

AniStream/
├── index.html             # Main application file
├── README.md              # Project documentation
└── assets/                # Optional assets folder
    ├── images/            # Screenshots and logos
    ├── css/               # Additional stylesheets
    └── js/                # Additional scripts

🌐 Browser Support

Browser	Support	Notes
Chrome	✅ Full	Recommended
Firefox	✅ Full	Optimized
Safari	✅ Full	iOS compatible
Edge	✅ Full	Chromium-based
Mobile Browsers	✅ Full	Responsive design

🔧 Technical Details

Built With

• HTML5 - Modern semantic markup
• CSS3 - Advanced styling with variables
• JavaScript - Interactive functionality
• Particles.js - Background animation
• Font Awesome - Beautiful icons
• Google Fonts - Typography

Key Technologies

• M3U8 Playback - Native HTML5 video support
• Responsive Design - Mobile-first approach
• CSS Grid & Flexbox - Modern layouts
• ES6 JavaScript - Modern syntax

🎨 Themes

AniStream supports easy theme customization. Here are some pre-built themes:

Default Theme (Purple)

--primary: #8B5CF6;
--primary-dark: #7C3AED;

Ocean Theme

--primary: #3B82F6;
--primary-dark: #2563EB;

Forest Theme

--primary: #10B981;
--primary-dark: #059669;

Sunset Theme

--primary: #F59E0B;
--primary-dark: #D97706;

📱 Mobile Experience

AniStream is fully optimized for mobile devices:

• Touch-friendly controls
• Responsive video player
• Optimized performance
• Smooth scrolling

🔒 Privacy & Security

• No tracking or analytics
• All processing happens locally
• No data sent to external servers
• Open source and transparent

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Setup

# Fork and clone the repository
git clone https://github.com/your-username/AniStream.git

# Make your changes and test locally
# Ensure the player works across different browsers

# Submit your pull request

🐛 Troubleshooting

Common Issues

Issue	Solution
Video not loading	Check M3U8 URL validity
Audio but no video	Ensure codec compatibility
Mobile playback issues	Check network connectivity
Particles not showing	Enable JavaScript

Debug Mode

Add this to the console for debugging:

// Enable debug logging
localStorage.setItem('debug', 'true');

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Shinei Nouzen - Project creator and maintainer
• Particles.js - Beautiful background effects
• Font Awesome - Icon library
• Google Fonts - Typography
• Contributors - Everyone who helped improve AniStream

📞 Support

If you need help or have questions:

• 🐛 Issues: GitHub Issues
• 💡 Suggestions: Open a feature request

---

💕 Loved My Work?

🚨 Follow me on GitHub

⭐ Give a star to this project

For inquiries or collaborations

^{Copyright © 2025 Shinei Nouzen All Rights Reserved}