在 React 中隐藏视频中的某些内容

问题描述

我需要隐藏下图中圈出的图标吗？我怎样才能隐藏它？我正在使用 react-player。

请检查此代码和框 CLICK HERE

<ReactPlayer
      url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
      playing={true}
      volume={1}
      width="100%"
      height="100%"
      controls
/>

解决方法

HTML5 <Video /> 标签支持通过 disablepictureinpicture 属性禁用此功能。这仍是一项实验性功能，可能不适用于所有浏览器。

通过 ReactPlayer 的配置传递 disablePictureInPicture html 属性。如果画中画控件没有消失，请尝试设置 controlsList: 'nodownload'。

const config = {
  attributes: {
    disablePictureInPicture: true,controlsList: 'nodownload'
  }
};

const App = () => (
  <div style={styles}>
    <ReactPlayer
      url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
      playing={true}
      volume={1}
      width="100%"
      height="100%"
      config={config}
      controls
    />
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
  </div>
);