如何将视频.js与创建下一个应用程序nextjs一起使用?

Question

我正在尝试将视频.js与创建下一个应用程序一起使用，但我无法加载视频.js.css。 这就是我的组件的样子。

import videojs from 'video.js'
import videoStyles from '../node_modules/video.js/dist/video-js.min.css'
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>    
<div data-vjs-player>
<video ref={ node => this.videoNode = node } className="video-js"></video>
</div>
<style jsx>{videoStyles}</style>
</div>
)
}
}

我正在使用 styled-jsx/css 加载器来加载外部 css 文件。

Answer 1

看看下一个.js github 示例。这应该足以让你开始。