Griffith Roadmap: April - October 2019

Roadmap Overview

This roadmap is meant to give our team and users clarity over our priorities over the next 6 months. It's meant more as a set of guidelines than as a strict set of tasks we are bound to finish. We may adjust over this period depending on changing needs and feedback from our users.

At a high-level, we're going to be focusing on the following five things:

• MSE etc
• Code quality improvement
• UX/UI Improvement
• Docs
• React etc

MSE etc

• Audio/Video sync problem
• Automatically adjust video quality
• Support FMP4 format

Code quality improvement

• TypeScript rewrite
• More unit test coverage
• Support e2e test

UX/UI Improvement

• Feedback processes in vision
• Mini player
• Speed up
• Tooltip preview image
• Subtitles
• Dark mode
• Danmaku（maybe
• ...

Docs

• Griffith website
• Griffith design description

React etc

• Support React hooks
• Support React SSR application

🐛 Bug Report

Cannot read property 'start' of undefined

🐛 Bug Report

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

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

🚀 Feature Proposal

A Japanese version of the document.

Motivation

More i18n.

Example

https://github.com/yahoojapan/NGT/blob/master/README-jp.md

Pitch

Larger community.

./node_modules/griffith/esm/index.js
Module parse failed: Unexpected token (261:4)
You may need an appropriate loader to handle this file type.
| const {
| play_url,
| ...rest
| } = sources[quality];
| return { ...rest,

🐛 Bug Report

In a few cases, Griffith will have audio and video sync problems when using MSE.

Expected behavior

Audio/Video Sync

thank you

bigscreen does not run in Node. It must be replaced in order to support React server-side rendering.

I tried to use file: ///, but still couldn't play it

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!

🐛 Bug Report

Cannot read property 'chunkOffset' of undefined

演示 Example 在本地测试的时候，hls video with media source extensions，无法切换画质，切换就会黑屏播放不了？

🚀 Feature Proposal

Now we support these shortcuts.

• Spacebar: Play/Pause when the seek bar is selected. Activate a button if a button has focus.
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]
• [ ]

Maybe we can refer to Youtube for more shortcuts.

Motivation

Please outline the motivation for the proposal.

Example

Please provide an example for how this feature would be used.

Pitch

Why does this feature belong in the griffith ecosystem?

💬 Questions and Help

这个报错怎么解决

💬 Questions and Help

With webpack building process， a error came out as follows：

ERROR in ./node_modules/griffith/esm/index.js 261:4
Module parse failed: Unexpected token (261:4)
You may need an appropriate loader to handle this file type.
|   const {
|     play_url,
>     ...rest
|   } = sources[quality];
|   return { ...rest,

Is there any babel plugins or preset I should install?

Current babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"]
}

Thanks for the help

实际
interface PlaySource {
bitrate: number
duration: number
format: string
height: number
play_url: string
size: number
width: number
}

大佬，以哪个为准啊

💬 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!

🐛 Bug Report

To Reproduce

After dev server is started, Edit a file and trigger HMR

🐛 Bug Report

I have a page contains a list of videos, each click on a video will open a modal to play this video. But there are a few bugs, please help me out.

Can not destroy the player

I need to destroy the player when close the modal, otherwise it will continue play in background. And when I play the next video, the previous one should be destroyed too.

Duration info not in one line

Does it support auto play?

I have not found auto play prop in api doc.

To Reproduce

Here is my code. The file object is a state, it will be set when play another video.

        <Player
          id={`video-player-${file.id}`}
          title={file.meta.name}
          cover={file.thumbUrls.large}
          duration={0}
          sources={{
            'hd': {
              play_url: file.url,
              size: file.meta.size,
            }
          }}
          locale="zh-Hans"
        />

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

## System:
 - OS: macOS 10.14.4
 - CPU: (4) x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
 - Memory: 62.91 MB / 8.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.2.0 - /usr/local/bin/node
 - Yarn: 1.12.3 - /usr/local/bin/yarn
 - npm: 6.9.0 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman

💬 Questions and Help

报这个错：
Warning: Failed prop type: The prop id is marked as required in PlayerContainer, but its value is undefined.
这是为什么呢

<Player sources={{cover: 'http://172.25.28.137:6011/hls/hkstv/hls.m3u8'}} />这是代码

• Allow server side to pass userAgent string as a prop
• remove directly reading of navigator.userAgent

🚀 Feature Proposal

run e2e Testing with Jest and Puppeteer. see https://github.com/smooth-code/jest-puppeteer

💬 where is the online demo ?

🚀 Feature Proposal

The current shortcut feature does not ignore the hotkey modifier, we need to ignore it.

💬 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!

🚀 Feature Proposal

Now we support these shortcuts.

• Spacebar: Play/Pause when the seek bar is selected. Activate a button if a button has focus.
• k: Pause/Play in player.
• Left/Right arrow on the seek bar: Seek backward/forward 5 seconds.
• j: Seek backward 10 seconds in player.
• l: Seek forward 10 seconds in player.
• Up/Down arrow on the seek bar: Increase/Decrease volume 5%.
• Numbers 1 to 9 on the seek bar (not on the numeric pad): Seek to the 10% to 90% of the video.
• Number 0 on the seek bar (not on the numeric pad): Seek to the beginning of the video.
• f: Activate full screen. If full screen mode is enabled, activate F again or press escape to exit full screen mode.
• m: Toggle mute

Maybe we can refer to Youtube for more shortcuts.

• Play/Pause Media Key on keyboards: Play / Pause.
• Stop Media Key on keyboards: Stop.
• Home/End on the seek bar: Seek to the beginning/last seconds of the video.
• < (SHIFT+,): Decrease playback rate
• > (SHIFT+.): Increase playback rate
• .: Next frame (while paused)
• ,: Previous frame (while paused)

💬 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!

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

在typescript下调用报错。

Many sites have a "pseudo fullscreen mode"(网页全屏) for video player that fill the current browser window with the video other than the entire screen.

Module not found: Can't resolve 'griffith-hls' in '/Users/liupengyu/projects-self/zhihu-video/node_modules/griffith/es/components/Video'

🐛 Bug Report

appendBuffer will throw error If sourceBuffer are not open yet.

Expected behavior

no error

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

Paste the results here:

 - OS: macOS High Sierra 10.13.4
 - CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
 - Memory: 593.20 MB / 8.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 8.9.1 - ~/.nvm/versions/node/v8.9.1/bin/node
 - Yarn: 1.12.3 - ~/.nvm/versions/node/v8.9.1/bin/yarn
 - npm: 5.5.1 - ~/.nvm/versions/node/v8.9.1/bin/npm

any rtmp support?

🐛 Bug Report

when using MSE on mp4 file which hosted on SinaCloud, got an error:

Access to XMLHttpRequest at 'https://static.ftqq.com/resource-f392edb2f32fe3b2cb2fd58619ac798381b91602' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

To Reproduce

add https://static.ftqq.com/resource-f392edb2f32fe3b2cb2fd58619ac798381b91602 as source play_url , turn useMSE on , press play button and you will see the error.

comment line 51~52 on griffith-mp4/esm/index.js , then works well .

Expected behavior

play the video.

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

Paste the results here:

*** Clipboard option removed - use clipboardy or clipboard-cli directly ***


## System:
 - OS: macOS High Sierra 10.13.6
 - CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
 - Memory: 85.70 MB / 10.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 9.11.2 - ~/.nvm/versions/node/v9.11.2/bin/node
 - Yarn: 1.15.2 - ~/.yarn/bin/yarn
 - npm: 5.6.0 - ~/.nvm/versions/node/v9.11.2/bin/npm
 - Watchman: 4.7.0 - /usr/local/bin/watchman

🚀 Feature Proposal

Maintaining a KeyCode constant is not a good choice, maybe we can use event.key

你好 我想问下 这个组件兼容ie吗。我们实验ie11是不行的。

griffith支持RTMP播放吗？

💬 Questions and Help

MSE 类的 init 方法中有如下代码

this.mediaSource.addEventListener('sourceopen', () => {
    this.handleAppendBuffer(videoRawData, 'video')
    this.handleAppendBuffer(audioRawData, 'audio')
})

但 sourceopen 事件已经执行过了，这里不会再执行，请问这里这么写的目的是什么？

我的理解是这里是想要把视频信息加到相应的 sourceBuffer 里

I cannot find document about griffith-message and props detail

从点击视频播放按钮，到视频开始播放，1s 就可以播放了，想问下这块是有做优化吗
感谢~

💬 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!

🚀 Feature Proposal

sources 更新不会重新拉视频源

💬 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!
playerProps: {
duration: 0,
cover: bigVideo,
sources: {
hd: {
play_url: 'm3u8地址',
},
},
},

<Player id={styles['player']} {...playerProps} />

1、初始化的时候写死了play_url: 'm3u8地址'能够播放，如果不写死，播放器无效；
2、动态点击某个按钮获取新的直播地址，输入地址正常，当时播放器播放无效；

请问是跟初始化有关吗

🚀 Feature Proposal

A clear and concise description of what the feature is.

Motivation

Please outline the motivation for the proposal.

Example

Please provide an example for how this feature would be used.

Pitch

Why does this feature belong in the griffith ecosystem?

🐛 Bug Report

getSamplesInterval.js:24 Uncaught TypeError: Cannot read property 'samples' of undefined
    at getVideoSamplesInterval (getSamplesInterval.js:24)
    at MP4Probe.updateInterval (mp4Probe.js:28)
    at MP4Probe.getFragmentPosition (mp4Probe.js:51)
    at MSE.seek (controller.js:66)
    at Player._this.handlePlay (player.js:82)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5030)
    at batchedUpdates$1 (react-dom.development.js:21437)
    at batchedUpdates (react-dom.development.js:2247)
    at dispatchEvent (react-dom.development.js:5110)
    at react-dom.development.js:21494
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21493)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)

To Reproduce

add player with fmp4 url , trun on useMSE , click the player then got error in console.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Player from 'griffith'

class App extends Component {
  render() {
    const sources = {
      hd:{
        play_url: 'http://localhost:9999/dog.f.mp4',
        bitrate:1522,
        duration:29,
        format:'mp4'
        
      }
    }
    return (
      <div className="App">
        <header className="App-header">
        <Player sources={sources} id="player"  useMSE={true} />
        </header>
      </div>
    );
  }
}

export default App;

error

getSamplesInterval.js:24 Uncaught TypeError: Cannot read property 'samples' of undefined
    at getVideoSamplesInterval (getSamplesInterval.js:24)
    at MP4Probe.updateInterval (mp4Probe.js:28)
    at MP4Probe.getFragmentPosition (mp4Probe.js:51)
    at MSE.seek (controller.js:66)
    at Player._this.handlePlay (player.js:82)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:265)
    at executeDispatch (react-dom.development.js:571)
    at executeDispatchesInOrder (react-dom.development.js:596)
    at executeDispatchesAndRelease (react-dom.development.js:695)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:704)
    at forEachAccumulated (react-dom.development.js:676)
    at runEventsInBatch (react-dom.development.js:844)
    at runExtractedEventsInBatch (react-dom.development.js:852)
    at handleTopLevel (react-dom.development.js:5030)
    at batchedUpdates$1 (react-dom.development.js:21437)
    at batchedUpdates (react-dom.development.js:2247)
    at dispatchEvent (react-dom.development.js:5110)
    at react-dom.development.js:21494
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at interactiveUpdates$1 (react-dom.development.js:21493)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)

Expected behavior

play video without anyerror

Link to repl or repo (highly encouraged)

https://github.com/easychen/bad-player-demo

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-3210M CPU @ 2.50GHz
 - Memory: 88.14 MB / 10.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.12.0 - /usr/local/bin/node
 - Yarn: 1.12.3 - ~/.yarn/bin/yarn
 - npm: 6.7.0 - /usr/local/bin/npm
 - Watchman: 4.7.0 - /usr/local/bin/watchman
## npmPackages:
 - griffith: ^1.1.1 => 1.1.1 

💬 Questions and Help

• 怎样设置自动播放视频？

能否给个VUE的用例，