hcode-player
v0.2.6
Published
Video Player Component made with React and @material-ui/core by Hcode.
Downloads
2
Maintainers
Readme
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;
License
This project is licensed under the terms of the MIT license.