Moved to https://github.com/280studios/opensourceplayer

🎬 Open Source Media Player

A customizable and feature-rich media player for web applications. Without any dependencies and modular design.

🚀 Features

• Video and Audio Playback: Supports video and audio with respective html tags (Works best for video).
• Subtitles Support: Easily add and manage subtitles via the data-subtitle-src attribute in the video tag.
• Modular
• Context Menu
• Picture-in-Picture Mode
• Fullscreen Mode
• Cinematic Mode: Darkens the page background.
• Settings Menu: Customizable settings.
• Addons: (Javascript files enabled via config)
• Svg icons or unicode icons as fallback.

Images

🛠️ Usage

1. Include the CSS in your HTML:

<link rel="stylesheet" href="css/OpenSourcePlayer.css">

2. Add the player HTML structure

<div class="osp-player">
  <video>
   <source src="your-video-here" type="video/mp4">
  </video>
</div>

3. Initialize the player in JavaScript

import { initializePlayer } from './js/modules/OpenSourcePlayer.js';

document.addEventListener('DOMContentLoaded', () => {
  initializePlayer();
});

📚 Documentation

Configuration

Customize the player by modifying addons in js/modules/OpenSourcePlayer.js:

const config = {
  usePreload: true,
  mouseEvent: true,
  useSvgIcons: true,
  useMediaSource: false,
  useSubtitles: true,
  useSettings: true,
  useContextMenu: true,
  useVerticalVidFill: true,
  useCinematicMode: true,
  useFastForward: true,
  debugger: false
};

Adding Subtitles

To add subtitles, include the data-subtitle-src attribute in the video tag:

<video data-subtitle-src="path/to/subtitles.vtt">

Changeing icons

Set each icons in controls.js -> svgIcons from a singe icons.svg file.

Currently using 'Streamline Remix' icons

🤝 Contributing

Contributions are welcome just submit a pull request or donate a coffee.

📄 License

This project is licensed under the GNU General Public License - see the LICENSE file for details.

---

Happy coding! 🎉