Reactjs 在react for hls中设置Plyr视频播放器

我正在建立一个直播网站，但我的视频播放器有问题。 我想有一个很好的视频播放器，有livestream控制，如自动播放，暂停，播放，给你带来现场，音量控制和自动质量

我看到一些人用Plyr做这件事，所以这就是我想做的。 然而，我很难在我的视频播放器上显示视频，以下是我所拥有的

从“React”导入React；
从“Plyr”进口Plyr；
从“Hls.js”导入Hls；
导入“plyr/dist/plyr.css”；
常量url=https://live.api.video/liqjASz1KXHCgp2gh8InxtB.m3u8';
类PlyrComponent扩展了React.Component{
componentDidMount（）{
const video=document.querySelector（“#player”）；
康斯特播放器=新Plyr（视频）；
如果（Hls.isSupported（））{
常量hls=新的hls（）；
加载源（url）；
附件媒体（视频）；
player.on（'play'，（）=>hls.startoad（））；
}
}
render（）{
返回；
}
}
导出默认组件；

我正在用react构建我的网站，所以这是我附带的组件。现在，它不工作，它只是加载没有视频。我真的需要一些帮助

如果你有其他视频播放器推荐，让我知道

谢谢