A React-based web video player

Overview

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 griffith-hls by default. You can make your bundle smaller by injecting aliases at build-time.

If you use webpack, do so with resolve.alias:

// webpack v5+
module.exports = {
  resolve: {
    alias: {
      'griffith-hls': false,
      'griffith-mp4': false,
    },
  },
}

// webpack v4
module.exports = {
  resolve: {
    alias: {
      'griffith-hls': 'griffith/null',
      'griffith-mp4': 'griffith/null',
    },
  },
}

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

Issues
  • 进入画中画时候,显示的Playing in picture-in-picture怎么设置为中文?

    进入画中画时候,显示的Playing in picture-in-picture怎么设置为中文?

    当进入画中画时候,显示的Playing in picture-in-picture怎么才可以设置成中文?

    opened by showtan001 9
  • 关于standalone 模式

    关于standalone 模式

    💬 Questions and Help

    • Read carefully the README of the project
    • Search if your answer has already been answered in old issues

    After you can submit your question and we will be happy to help you!

    文档中说明了props 的定义请看 Griffith 的文档。 按照官方的文档在“standalone 模式”下添加对应的js并不生效

    #js const props = { cover: "https://zhstatic.zhihu.com/cfe/griffith/zhihu2018.jpg", locale: "zh-Hans", };

    官方说可以支持hls视频,但并未给出详细文档;在清晰度选项中也并不支持“ld 流畅”选项,默认音量只有50%左右,并没有看到可以修改音量的选项。

    opened by tingyux 6
  • 引入griffith时报错

    引入griffith时报错

    💬 Questions and Help

    griffith_error

    这个报错怎么解决

    opened by Kdze 3
  • 怎么在播放完之后触发重新播放,我这样写能捕捉到播放完成的事件但是不能触发再次播放

    怎么在播放完之后触发重新播放,我这样写能捕捉到播放完成的事件但是不能触发再次播放

    const {dispatchAction,subscribeEvent} = this.props this.play=subscribeEvent(EVENTS.DOM.ENDED, () => { dispatchAction(ACTIONS.PLAYER.PLAY) }) @wayhome @ambar @lsbigboy @lixiaoyan

    opened by xzf123456 3
  • build: add CJS & ESM build

    build: add CJS & ESM build

    • 每个包都需要输出 CJS
    • 部分包没有经过 build
    • 去掉多余的 @babel/runtime
    opened by ambar 3
  • 怎么设置倍速播放

    怎么设置倍速播放

    💬 Questions and Help

    • Read carefully the README of the project
    • Search if your answer has already been answered in old issues

    After you can submit your question and we will be happy to help you!

    opened by exert-oneself 3
  • 怎样设置自动播放视频?

    怎样设置自动播放视频?

    💬 Questions and Help

    • 怎样设置自动播放视频?
    enhancement✨ 
    opened by git-lt 3
  • Replay text

    Replay text

    Hello, I'd like to ask you how can I change the label of replay button? It's by default in japanesse and I'd like to change it to different language (for example polish). If it's not possible english will be fine aswell I've set the "locale" prop to "en" but it's not working

    image image

    Best regards

    opened by Konserwa203 3
  • build: remove webpack sourcemap

    build: remove webpack sourcemap

    opened by wangcheng 2
  • build(deps): bump url-parse from 1.5.1 to 1.5.3

    build(deps): bump url-parse from 1.5.1 to 1.5.3

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • 热键切换应有视觉反馈

    热键切换应有视觉反馈

    null

    opened by ambar 0
  • build(deps): bump tmpl from 1.0.4 to 1.0.5

    build(deps): bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Standalone模式下如何播放HLS,谁能给个实例?

    Standalone模式下如何播放HLS,谁能给个实例?

    opened by cc963020001 0
  • fix: 对修复之前ie问题添加ie判断

    fix: 对修复之前ie问题添加ie判断

    Description

    之前在未播放状态时对播放器执行 update_time 操作,为了修复 ie 一个问题对未播放状态时间重置为0, 造成虽然给未播放状态播放器设置了开始时间,但一直从头播放,为修复这个问题,对之前这个 bug 降级判断 ie 浏览器才执行归零操作,以确保chrome等主流浏览器没有问题

    Fixes # (issue)

    How Has This Been Tested?

    • [x] 完成自测

    Checklist:

    • [x] My code follows the style guidelines of this project
    • [x] I have performed a self-review of my own code
    • [x] I have commented my code, particularly in hard-to-understand areas
    • [x] I have made corresponding changes to the documentation
    • [x] My changes generate no new warnings
    • [x] Any dependent changes have been merged and published in downstream modules
    opened by Lisuhan 1
  • 安卓app内,有声音但是黑屏。全屏按钮无法点击

    安卓app内,有声音但是黑屏。全屏按钮无法点击

    安卓app内,有声音但是黑屏。全屏按钮无法点击。请问如何解决?

    opened by huanlirui 0
  • 请问怎么隐藏控制条

    请问怎么隐藏控制条

    opened by AvnTwty 0
  • Can't get MP4 to buffer

    Can't get MP4 to buffer

    I am trying to use the Griffith Player component in my react application. I have a series of MP4 videos that are located in a folder on a web server. The videos are fairly large so I would like for them to be streamed/buffered so they can be started ASAP, not waiting for the entire video to load.

    According to the documentation, the Player component should be able to accomplish this, but I am not getting the results. The video is located at http://www.asdnetwork.com/asdsupport/content/videos/myTestVideo.mp4

    Can you please give me an example of being able to stream/buffer this video so it will start immediately. Also, I think this may be related???, but once the video starts, I cannot seek forward/backward - the video just starts over from the beginning.

    Thank you for the help!

    opened by davewurtz 0
  • 移动端静音问题

    移动端静音问题

    🐛 Bug Report

    在移动端点击音量按钮将视频静音后,再次点击该按钮没有任何反馈,也不能像pc端一样点击音量条来将音量回复 image

    To Reproduce

    知乎移动端线上的视频播放器都有这个问题 https://www.zhihu.com/question/339268473/answer/872126420

    Expected behavior

    当声音正常时点击音量按钮,视频静音; 再次点击音量按钮,声音正常

    Link to repl or repo (highly encouraged)

    https://www.zhihu.com/question/339268473/answer/872126420

    Run npx envinfo --system --binaries --npmPackages griffith --markdown --clipboard

    Paste the results here:

    ## System:
     - OS: macOS High Sierra 10.13.6
     - CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
     - Memory: 51.10 MB / 8.00 GB
     - Shell: 3.2.57 - /bin/bash
    ## Binaries:
     - Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
     - Yarn: 1.19.1 - /usr/local/bin/yarn
     - npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
    ## npmPackages:
     - griffith: ^1.5.0 => 1.5.0
    
    opened by rockhentai 0
  • 微信浏览器播放

    微信浏览器播放

    请问下 安卓手机微信端打开的时候如何设置默认小窗口播放?

    opened by fively 0
Releases(v1.5.0)
Owner
Zhihu
知乎 GitHub 官方帐号 ,欢迎关注我们的技术专栏 https://zhuanlan.zhihu.com/hackers
Zhihu
Resolution switcher adds the ability to select the video quality in video.js player.

Video.js Resolution Switcher Resolution switcher for video.js v5 Example Working examples of the plugin you can check out if you're having trouble. Or

Kasper Moskwiak 384 Sep 21, 2021
qier-player is a simple and easy-to-use h5 video player with highly customizable UI and rich features.

A simple and easy-to-use h5 video player with highly customizable UI and rich features.

chen xin 400 Oct 17, 2021
Create videos using React!

Reactive Videos are videos created using HTML and React components. This allows you to leverage the almost limitless possibilities of the web browser

Mikael Finstad 30 Aug 29, 2021
video.js player component for React.

?? video.js component for React

Peng Zhang 62 Sep 28, 2021
Dailymotion player component for React.

react-dailymotion Dailymotion player component for React. Install - Usage - Demo - Props Install npm install --save react-dailymotion Usage Demo - De

üWave 13 Apr 29, 2021
A collaboration application built with the twilio-video.js SDK and React.js

A collaboration application built with the twilio-video.js SDK and React.js

Twilio 1.5k Oct 9, 2021
Audio player hooks & Utility Classes to play audio files, using libraries react-native-video, rxjs, with playlist handling, player controls.

react-native-audio-player-hooks Audio player hooks & Utility Classes to play audio files, using libraries react-native-video rxjs, with playlist handl

Fateh Farooqui 31 Oct 11, 2021
Lion Player - open-source React video player powered by VideoJS

Lion Player - open-source React video player powered by VideoJS

Prince Neil Cedrick Castro 18 Sep 30, 2021
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.2k Oct 12, 2021
YouTube playback technology for Video.js

YouTube Playback Technology for Video.js Install You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source an

Video.js 979 Oct 18, 2021
Audio player react component for material ui design

Material UI Audio Player Audio player for material ui design developed with react.js. Requires Material UI 4 version. Demo: https://werter12.github.io

Oleksandr Samofan 47 Oct 7, 2021
Adds more hotkey support to video.js

videojs-hotkeys Introduction Usage CDN version Self hosted Enable the plugin Options Custom Hotkeys and Overrides Override existing hotkeys Create new

Chris 165 Sep 3, 2021
YouTube player component for React.

YouTube player component for React.

üWave 105 Oct 13, 2021
Ready to go Media Player Component for React.

react-media-viewer Ready to go Media Player Component for React. Supported Source: YouTube SoundCloud Facebook Vimeo Twitch Streamable Wistia DailyMot

Eric Lam 3 Sep 14, 2021
JoL-player - Simple, beautiful and powerful react player

JoL-player Simple, beautiful and powerful react player English | 简体中文 ✨ Characteristics ?? High-quality React components out of the box. ?? Use TypeSc

null 95 Oct 19, 2021
A React-based web video player

A React-based web video player

Zhihu 2.3k Oct 15, 2021
Twitch Embed Video wrapper for ReactJS

Twitch Embed Video wrapper for ReactJS

Erik Guzman 46 Aug 28, 2021
React Video player with markers

React Video player with markers

Arthur Mironov 19 Sep 10, 2021
React project that demonstrates using a YouTube video as a background cover.

Video Background What is it? This is a sample project intended to demonstrate how to overlay a YouTube video as a background cover. Why build it? Want

Reactgular 6 Sep 11, 2021