react 如何集成video.js 和 videojs-contrib-hls 报错

Question

使用react集成video.js 和 videojs-contrib-hls

{
  "name": "x-video",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.12",
    "videojs-contrib-hls": "^5.10.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "video.js": "^6.2.5"
  }
}

在文件中这样使用:

import 'video.js/dist/video-js.css';

import React from 'react';
import videojs from 'video.js';
import video from 'videojs-contrib-hls';

结果报错：

./node_modules/videojs-contrib-hls/es5/playlist-loader.js
node_modules/videojs-contrib-hls/es5/playlist-loader.js:583
  580 |   };
  581 | };
  582 | 
> 583 | PlaylistLoader.prototype = new _videoJs.EventTarget();
  584 | 
  585 | exports['default'] = PlaylistLoader;
  586 | module.exports = exports['default'];
View compiled
__webpack_require__
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:87
  84 |         console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |         hotCurrentParents = [];
  86 |     }
> 87 |     return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |     return {
View compiled
./node_modules/videojs-contrib-hls/es5/videojs-contrib-hls.js
node_modules/videojs-contrib-hls/es5/videojs-contrib-hls.js:23
  20 | 
  21 | var _globalDocument2 = _interopRequireDefault(_globalDocument);
  22 | 
> 23 | var _playlistLoader = require('./playlist-loader');
  24 | 
  25 | var _playlistLoader2 = _interopRequireDefault(_playlistLoader);
  26 | 
View compiled
__webpack_require__
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:87
  84 |         console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |         hotCurrentParents = [];
  86 |     }
> 87 |     return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |     return {
View compiled
./src/Player.js
http://localhost:3000/static/js/bundle.js:116636:97
__webpack_require__
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:87
  84 |         console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |         hotCurrentParents = [];
  86 |     }
> 87 |     return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |     return {
View compiled
./src/App.js
http://localhost:3000/static/js/bundle.js:116498:88
__webpack_require__
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:87
  84 |         console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |         hotCurrentParents = [];
  86 |     }
> 87 |     return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |     return {
View compiled
./src/index.js
http://localhost:3000/static/js/bundle.js:116779:82
__webpack_require__
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
fn
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:87
  84 |         console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
  85 |         hotCurrentParents = [];
  86 |     }
> 87 |     return __webpack_require__(request);
  88 | };
  89 | var ObjectFactory = function ObjectFactory(name) {
  90 |     return {
View compiled
(anonymous function)
http://localhost:3000/static/js/bundle.js:116928:37
__webpack_require__
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:669
  666 | };
  667 | 
  668 | // Execute the module function
> 669 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
  670 | 
  671 | // Flag the module as loaded
  672 | module.l = true;
View compiled
(anonymous function)
/Users/huangzhenjun/Public/Git/PartTime/x-video/webpack/bootstrap 370b06d2e09af8b5cf34:715
  712 | __webpack_require__.h = function() { return hotCurrentHash; };
  713 | 
  714 | // Load entry module and return exports
> 715 | return hotCreateRequire(0)(__webpack_require__.s = 0);
  716 | 
  717 | 
  718 | 
View compiled
global code
http://localhost:3000/static/js/bundle.js:717:12

Answer 1

可以试试我写的一个组件 https://github.com/sohoorc/vi...

Answer 2

https://github.com/sohoorc/vi...