Hcode-player NPM

Hcode Player with React and Material UI

Video Player Component made with React and @material-ui/core by Hcode.

Installation

npm install hcode-player

or yarn

yarn add hcode-player

Demo

Usage

Basic use:

import React from 'react';
import { HPlayer } from 'hcode-player';

const App = () => {
  return (
    <HPlayer url="https://d2z8nku95gg9lc.cloudfront.net/IN04_CS_Cores_720.mp4">
  );
};

export default App;

Player with multiple video resolutions:

import React, { useState } from "react";
import { HPlayer } from 'hcode-player';

const App = () => {

  const [sources, setSources] = useState([
    {
      url: 'https://d2z8nku95gg9lc.cloudfront.net/IN04_CS_Cores_1080.mp4',
      resolution: '1080p',
    },{
      url: 'https://d2z8nku95gg9lc.cloudfront.net/IN04_CS_Cores_720.mp4',
      resolution: '720p',
    },{
      url: 'https://d2z8nku95gg9lc.cloudfront.net/IN04_CS_Cores_360.mp4',
      resolution: '360p',
    }
  ]);

  return (
    <HPlayer url={sources}>
  );
};

export default App;

With autoplay:

import React from 'react';
import { HPlayer } from 'hcode-player';

const App = () => {
  return (
    <HPlayer autoPlay={true} url="https://d2z8nku95gg9lc.cloudfront.net/IN04_CS_Cores_720.mp4">
  );
};

export default App;

Locale:

import React from 'react';
import { HPlayer, HPlayerLocale } from 'hcode-player';

const locale: HPlayerLocale = {
  quality: 'Qualidade';
  playbackSpeed: 'Reprodução';
}

const App = () => {
  return (
    <HPlayer autoPlay={true} url="https://d2z8nku95gg9lc.cloudfront.net/IN04_CS_Cores_720.mp4" locale={locale}>
  );
};

export default App;