javascript - React 中的 Video.js 播放列表

Question

我试图让 React video.js 示例与 videojs-playlist 插件一起使用，但我不断收到以下错误:未捕获类型错误:this.player.playlist 不是函数。我的组件如下:

import React from 'react';
import videojs from 'video.js';
import 'videojs-playlist';

const VideoControl = React.createClass({ 
    componentDidMount() {

      this.player = videojs(this.videoNode);

      this.player.playlist([{
          sources: [{
            src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            type: 'video/mp4'
          }],
          poster: 'http://media.w3.org/2010/05/sintel/poster.png'
        }, {
          sources: [{
            src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
            type: 'video/mp4'
          }],
          poster: 'http://media.w3.org/2010/05/bunny/poster.png'
    }]);
  },

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


  render() {
    return (

            <div data-vjs-player>
              <video ref={ node => this.videoNode = node } className="video-js"></video>
            </div>

    )
  }
})

export default VideoControl;

videojs-playlist 似乎没有将其自身作为插件添加到 VideoJS 中。我正在使用最新的 React 和 Webpack。谢谢!

Answer 1

原来是Webpack的问题。我按照以下内容进行了操作:

import 'expose-loader?videojs!../../../../node_modules/video.js/dist/video.js';
require("script-loader!../../../../node_modules/videojs-playlist/dist/videojs-playlist.js");