goblin-laboratory / reactjs-player Goto Github PK

• 测试链接：http://nebula-playback.qiniudn.com/test-playback/flv/sample.flv
• 测试环境：window10，chrome77.0.3865.120（正式版本） （64 位）
  

flv地址是随便搜的，vlc可以播放

看网上的说法 useReducer 相比 useState 会做合并更新，能够提示性能

父级容器记得加relative

<div style={{
  height: '100%',
  position: 'relative'
}} >
  <ReactPlayer src={foo} />
</div>

demo就是如此, 点击后

我在实际使用中，会遇到
Can't resolve 'fbemitter' ./node_modules 等错误，我查看了 package.json，发现了依赖都定义在了 devDependencies 节点内，我感觉应该是放错位置了，你本地开发理论上是没问题的，但是如果直接 npm/yarn 添加依赖就报错了

然后装了swf-loader

    {
      test: /\.swf$/,
      use: [
        {
          loader: 'swf-loader'
        }
      ],
    }

问题页面

https://goblin-laboratory.github.io/react-player/

手机型号

华为手机 P10 青春版（水滴屏）

问题现象

1. 开始播放时，进入同层播放状态，水滴屏的工具栏显示正常，其他区域有半透明蒙板
   

2. 旋转手机，视频还是有半透明蒙板
   

3. 回到竖屏状态，页面下移，从水滴屏工具栏下方开始