Question

我试图让React video.js示例使用videojs-playlist插件，我不断收到以下错误：Uncaught TypeError: this.player.playlist is not a function。我的组件如下：

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");

Answer 2

import videojs from 'video.js';
import videojsPlaylistPlugin from 'videojs-playlist';
videojs.registerPlugin('playlist', videojsPlaylistPlugin);

适用于：

"video.js": "~7.0.3",
"videojs-playlist": "~4.2.1"

React中的Video.js播放列表

2 个答案: