[英]How to Use JWPlayer or Plyr.io for Video Player in React aplication?
I Create a Component say "Video Player" and use the player from Plyr.io. 我创建一个组件,说“视频播放器”,并使用Plyr.io中的播放器。 create the handle for initializing with handleVideoPlayer. 创建用于使用handleVideoPlayer初始化的句柄。 the Plyr script loaded with handlePlyrScript. 加载有handlePlyrScript的Plyr脚本。
This my code: 这是我的代码:
const VideoPlayer = (props) => {
return(
<div className={styles.videoSection}>
<div className={styles.videoResponsive}>
<video poster={props.video.poster} id="player" playsInline controls>
<source src={props.video.source} type="video/mp4" />
</video>
</div>
</div>
);
}
class PlayerPage extends Component {
state = {
currentEpisode : {},
allPlayList : [],
}
// load Plyr script from cdn
handlePlyrScript = () => {
const plyrscript = document.createElement('script');
plyrscript.src = 'https://cdn.plyr.io/3.5.2/plyr.polyfilled.js';
document.body.appendChild(plyrscript);
}
// handle Video Player
handleVideoPlayer = () => {
setTimeout(() => {
const player = new Plyr('#player')
}, 500)
}
componentDidMount = () => {
console.log(this);
if(typeof(this.props.location.state) !== "undefined"){
let play_data = this.props.location.state;
this.setState({
currentEpisode : play_data
})
} else {
console.log("nothing...")
}
// call the Plyr init video tag with #player
this.handlePlyrScript()
this.handleVideoPlayer()
}
render(){
return(
<div className={style.playerPageSection}>
<div className={style.videoWrapper}>
<div className={style.videoRow}>
<div className={style.videoLeft}>
<VideoPlayer video={this.state.currentEpisode} />
</div>
<div className={style.videoRight}>
</div>
</div>
</div>
</div>
);
}
}
export default PlayerPage;
But the result not showing a video with Plyr style, (the video just like a generic player with tag.) 但是结果并未显示具有Plyr风格的视频(该视频就像带有标签的通用播放器一样。)
May any solution about Video Player in React APP? 可以在React APP中找到有关Video Player的解决方案吗?
I think what you are looking for it's already made in this package: https://www.npmjs.com/package/react-plyr 我认为您要寻找的东西已经在此包装中制成: https : //www.npmjs.com/package/react-plyr
Should give you the result you are looking for. 应该给您您寻找的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.