时间戳

首页 > 解决方案 > 如何在 React HLSPlayer 中获取点击事件？

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

问题描述

在我的 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

标签： reactjs

解决方案

试试这个语法：

 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}
/>

请注意，只有在单击电影“屏幕”沙盒示例时才会触发单击事件

推荐阅读