reactjs - 如何在 React HLSPlayer 中获取点击事件？

Question

在我的 React 项目中，我有一个播放 m3u8 文件的视频插件，它是 React HLSPlayer。

我想在该插件上添加一个点击事件，以便在某些情况下呈现。什么是合适的解决方案？

const clickFunction = () => {
  console.log("Clicked");
};

<ReactHlsPlayer
  url={data.video.url}
  autoplay={false}
  onClick={clickFunction}
  controls={true}
  width="100%"
  height="auto"
  config={{
    file: {
      forceHLS: true,
    },
  }}
/>;

因为 onClick 没有输出

Answer 1

试试这个语法:

 const clickFunction = () => {
    console.log('Clicked')
    }

  return (
    <div className="App">
    <ReactHlsPlayer
    onClick={()=>{clickFunction()}}
    url='https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
    autoplay={false}
    controls={true}
    width={500}
    height={375}
/>

请注意，您的点击事件只会在您点击电影“屏幕”时触发
sandBox example