React中的Video.js播放列表

我正在嘗試獲取React video.js示例以使用videojs-playlist插件，並且我不斷收到以下錯誤：Uncaught TypeError: this.player.playlist is not a function。我的成分如下：React中的Video.js播放列表

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，播放列表似乎並沒有被自身增加VideoJS作爲插件。我正在使用最新的React和Webpack。謝謝！

來源

2017-07-20 frs17

是否有可能'videojs'初始化是異步？試着用'this.player'和'this.player.playlist'的console.log添加一個setInterval，看看它是，我們可以從那裏開始 – Grandas

@Grandas好主意！不幸的是，播放列表似乎不斷未定義。 – frs17

你可以改變這一行'import'videojs-playlist''從'videojs-playlist''導入vPlaylist'' – Muhaimin

原來是一個Webpack問題。我得到它與以下內容：

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

來源

2017-07-22 21:15:12 frs17

React中的Video.js播放列表

回答

相關問題