Needlessly Postulating Minds

    coinplayer

    1.0.0 • Public • Published

    A React-based Web video player

    License npm package Build Status codecov Code style PRs Welcome

    English | 简体中文 | 日本語

    Introduction

    • Streaming: Griffith makes streaming easy. Whether your video format is mp4 or hls, Griffith can use Media Source Extension (MSE) for segment loading.
    • Extensibility: Griffith makes it simple to support video features in React apps. It also supports the UMD (Universal Module Definition) patterns for direct use in the browser if your application is not based on React.
    • Reliability: Griffith has been widely used in the web and mobile web of Zhihu.

    Usage

    React application

    yarn add griffith
    import Player from 'griffith'
     
    const sources = {
      hd: {
        play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
      },
      sd: {
        play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
      },
    }
     
    render(<Player sources={sources} />)

    Detailed usage

    Note: Griffith is not supporting SSR application

    non-React application

    <script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
    const sources = {
      hd: {
        play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
      },
      sd: {
        play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
      },
    }
     
    Griffith.createPlayer(element).render({sources})

    Standalone mode detailed usage

    Project Structure

    Griffith is a Monorepo and uses Yarn workspace and Lerna.

    Core

    • packages/griffith: The core library

    Utilities

    • packages/griffith-message: Helpers for cross-window message
    • packages/griffith-utils: Utilities

    Plugins

    Others

    • example: example and demos
    • packages/griffith-standalone: A UMD build that can be used without React or Webpack

    Custom Build

    Build tools like webpack include griffith-mp4 and packages/griffith-hls by default. You can make your bundle smaller by excluding a plugin with build-time globals.

    If you use webpack, do so with DefinePlugin:

    const {DefinePlugin} = require('webpack')
     
    module.exports = {
      plugins: [
        new DefinePlugin({
          __WITHOUT_HLSJS__: JSON.stringify(true), // excludes griffith-hls
          __WITHOUT_MP4__: JSON.stringify(true), // excludes griffith-mp4
        }),
      ],
    }

    Note that without griffith-mp4 / griffith-hls Griffith can no longer play MP4 / HLS media unless the browser supports it natively.

    Contributing

    Read below to learn how you can take part in improving Griffith.

    Contributing Guide

    Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Griffith.

    Contributor

    LICENSE

    MIT

    Install

    npm i coinplayer

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    91

    Last publish

    Collaborators

    • winfrey