React Player Libs

The project of React Video Player wrapped-library.

This project has been created by Vessel. For a simple and quick reference, click here.

About

React.js용 비디오 플레이어 래핑 라이브러리. YouTube 및 Vimeo 영상을 플레이 할 수 있는 컴포넌트를 제공한다.

Installation

해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.

$ npm install --save @mornya/react-player-libs
or
$ yarn add @mornya/react-player-libs

Usage

특별한 설정 없이, SPA 형태의 앱에서 아래와 같이 바로 사용이 가능하다.

Example for React.js

import React from 'react';
import { YouTube, Vimeo } from '@mornya/react-player-libs';

export default () => (
  <>
    <YouTube
      videoId="유튜브 비디오 ID"
      autoplay
      autohide
      controls
      className={}
      style={}
      onReady={player => console.log('[YOUTUBE] READY:', player.getVideoData())}
      onStateChange={(status, player) => console.log('[YOUTUBE] STATE CHANGED:', status, player)}
      onFinish={() => console.log('[YOUTUBE] FINISH TO PLAY')}
      onError={err => console.log('[YOUTUBE] ERROR', err)}
    />

    <Vimeo
      videoId="비메오 비디오 ID"
      autoplay
      controls
      className={}
      style={}
      onReady={player => player.getVideoTitle()
        .then(title => console.log('[VIMEO] READY:', title))
        .catch(err => console.error(err))
      }
      onStateChange={(status, player) => console.log('[VIMEO] STATE CHANGED:', status, player)}
      onFinish={() => console.log('[VIMEO] FINISH TO PLAY')}
      onError={err => console.log('[VIMEO] ERROR', err)}
    />
  </>
)

Change Log

프로젝트 변경사항은 CHANGELOG.md 파일 참조.

License

프로젝트 라이센스는 LICENSE 파일 참조.