第1部分：我正在尝试构建一个使用video.js视频播放器的React组件 .

选择此库是因为它提供了一些开箱即用的功能 . 特别是视频格式转换和缓存 .

为了实现这一点，我使用了Video.js官方文档中的代码（或者更像是官方文档）@ https://github.com/videojs/video.js/pull/3972/files：

import React from 'react'
 import videojs from 'video.js'

 export default class VideoPlayer extends React.Component {
   componentDidMount() {
     // instantiate video.js
     this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
       console.log('onPlayerReady', this)
     })
   }

   // destroy player on unmount
   componentWillUnmount() {
     if (this.player) {
       this.player.dispose()
     }
   }

   // wrap the player in a div with a `data-vjs-player` attribute
   // so videojs won't create additional wrapper in the DOM
   // see https://github.com/videojs/video.js/pull/3856
   render() {
     return (
       <div data-vjs-player>
         <video ref={ node => this.videoNode = node } className="video-js"></video>
       </div>
     )
   }
 }

但是，当我运行此代码时，该组件似乎运行良好，但我在我的控制台中收到此错误：VIDEOJS：错误：TypeError：无法读取未定义的属性'vttjs'

完整堆栈跟踪：

VIDEOJS: ERROR: TypeError: Cannot read property 'vttjs' of undefined
    at Object.<anonymous> (vtt.js:1481)
    at __webpack_require__ (bootstrap 9672f7f…:555)
    at fn (bootstrap 9672f7f…:86)
    at Object.<anonymous> (index.js:22)
    at __webpack_require__ (bootstrap 9672f7f…:555)
    at fn (bootstrap 9672f7f…:86)
    at tech.js:648
    at Html5.addWebVttScript_ (tech.js:647)
    at HTMLVideoElement.bound (fn.js:32)
    at HTMLVideoElement.data.dispatcher (events.js:284)

从挖掘我已经完成这似乎是一个问题，Webpack无法捆绑Video.js的依赖项 . 有许多线程引用了这个错误，但我似乎无法找到一个商定的解决方案（或者解决这个问题的解决方案） .

任何人都可以了解这里发生的事情吗？或者也许提供一些潜在解决方案的信息 .

第2部分：从本质上讲，目前的任务是构建一个视频编辑器，允许用户裁剪视频或放大视频的一部分并平移（如谷歌 Map ，但视频） . 有一些video.js插件将提供一些此功能 .

此视频播放器/编辑器React组件将存在于使用Redux管理状态的较大React应用程序中 . 我担心将这个Video.js播放器及其状态集成到React Redux应用程序中会非常困难 . 由于视频播放器/编辑器的状态基本上是通过黑盒子（video.js和所使用的插件）实现的，它没有与Redux接口的API .

所有这些说，当调度一个动作并更新应用程序的状态并重新呈现应用程序/组件时，我担心视频播放器将被重新呈现并且其状态不会保留为状态此组件不由Redux商店管理 . 或者从React Redux应用程序中嵌入的非Redux组件派生的其他一些怪异 .

我知道那里有很多，我不相信我的表达能够像我希望的那样清晰，这说明我对这个问题缺乏明确性 . 希望其中一些是有道理的，并且有人对这类问题有一些了解 .

谢谢！

这是我用来参考的回购：https://github.com/caseysiebel/videojs-component

javascript reactjs redux react-redux video.js