@globis/player/README.md

GLOBIS React Video Player.

# GLOBIS Player

[![CircleCI](https://circleci.com/gh/globis-org/player/tree/master.svg?style=shield&circle-token=8cf7e2ce298c5fd889ce51f5862a3acee4f1f9a7)](https://circleci.com/gh/globis-org/player/tree/master)

## Usage

```
yarn add @globis/player
yarn add styled-components
```

```
import React from "react";
import { GlobisPlayer } from "@globis/player";

const sources = [
  {
    quality: 720,
    src: "https://player.vimeo.com/external/253375077.hd.mp4?s=11b80b8cddf06c166b735f47d6428731ff7bc08e\u0026profile_id=174"
  },{
    quality: 480,
    src: "https://player.vimeo.com/external/253375077.sd.mp4?s=4a09ca57d31c986ee1cadee5029f457a0606785b\u0026profile_id=165"
  },{
    quality: 360,
    src: "https://player.vimeo.com/external/253375077.sd.mp4?s=4a09ca57d31c986ee1cadee5029f457a0606785b\u0026profile_id=164"
  }
];

const App = () => (
  <GlobisPlayer
    poster={"https://globis-hodai.s3.amazonaws.com/uploads/course/photo/252/MECE.jpg"}
    label={"myLabel"}
    sources={sources}
  />
);
```