react-video.js 🎥🚀

react-video.js is like a friendly neighbor who knows all about video.js and is here to lend a helping hand. It's not flashy like a superhero, but it gets the job done. 🎬

What's the Scoop? 🍦

Imagine this: You're building a React app, and suddenly, you need video playback. Enter react-video.js! It's like having a backstage pass to the video.js concert. 🎵

Installation Made Easy 🛠️

Whether you prefer yarn or npm, we've got you covered:

# Use yarn (because it's chill)
yarn add @alireza-brz/react-video.js

# Or use npm (because it's classic)
npm install @alireza-brz/react-video.js

Showtime! 🎟️

Here’s a snippet from our laid-back React script:

import React from 'react';
import { ReactVideoJs, VideoJsOptions } from '@alireza-brz/react-video.js';

function MyVideo() {
  const videoJsOptions: VideoJsOptions = {
    autoplay: false,
    controls: true,
    responsive: true,
    fluid: true,
    sources: [
      {
        src: 'https://pixabay.com/videos/download/video-40456_large.mp4',
        type: 'video/mp4',
      },
    ],
    autoSetup: true,
  };

  const handlePlayerReady = (player) => {
    // You can handle player events here, for example:
    player.on('waiting', () => {
      console.log('🍿 Player is waiting');
    });

    player.on('dispose', () => {
      console.log('🎬 Player will dispose');
    });
  };

  return (
    <div
      style={{
        width: '500px',
        height: '500px',
      }}
    >
      <ReactVideoJs options={videoJsOptions} onReady={handlePlayerReady} />
    </div>
  );
}

export default MyVideo;

Linking to video.js 🎬

React-Video.js is like the peanut butter to video.js’s jelly! 🥪 It’s built on top of the video.js library, making it the ultimate duo for video playback in your React apps. 🎥

For more information, behind-the-scenes gossip, and secret handshakes, head over to the video.js project page. 🕵️‍♂️

Contributing 🚀

We’re all about community vibes! If you want to sprinkle some magic into React-Video.js, follow these steps:

• Fork the repository and clone it to your local machine.
• Create a new branch for your feature or bug fix. Call it something cool, like “moonwalk-feature” or “bug-buster.”
• Make your changes and test them thoroughly. No half-baked cookies here!
• Ensure that your code follows the project’s coding standards. We’re sticklers for neatness.
• Commit your changes and push them to your fork. 🚀
• Submit a pull request to the main repository, explaining your changes. Bonus points for using emojis! 🌟

Feel free to join our cosmic coding party! 🎉 If you have questions, just holler. 🙌😎

Grab your favorite snack, dim the lights, and enjoy the show! 🍿🎥

Feel free to adjust the chill factor as needed! If you have any questions, just holler. 🙌😎

Remember to adjust the popcorn-to-code ratio as needed! If you need more enchantments, just wave your wand (or keyboard). 😉🔮

Apache 2 License 📜

React-Video.js is licensed under the Apache License 2.0. It’s like giving your code a passport to the open-source world! 🌎✨