How to modify the controls of React Player while playing the mp4 file. I want the option of getting downloaded be disabled

Question

I want to remove the option of the marked circle in the image from the player so that video can't be downloaded

Hey @Govind can you provide us more information like source code, website you are referring to. The image you have provided doesn't give any information to help you. — Lokesh Sanapalli, Sep 18 '18 at 15:16

Fabian Schultz · Accepted Answer · 2018-09-18T16:34:31.910

20

You can add controlsList="nodownload" to the video element and the download button will disappear in Chrome.

Keep in mind that people can still download the video if they really want to. An additional precaution would be to disable right-clicking on the video element:

<ReactPlayer
  // Disable download button
  config={{ file: { attributes: { controlsList: 'nodownload' } } }}

  // Disable right click
  onContextMenu={e => e.preventDefault()}

  // Your props
  url="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
  className="react-player"
  controls
  width="100%"
  height="100%"
/>

edited Sep 18 '18 at 16:34

answered Sep 18 '18 at 15:26

Fabian Schultz

18,138
5
49
56

Hey @Fabian Can you please tell me how can I disable right click on videos in ReactJS – Govind Maheshwari Sep 18 '18 at 16:22
1

@GovindMaheshwari Updated my answer. – Fabian Schultz Sep 18 '18 at 16:36
Thanks for your help! – Govind Maheshwari Sep 18 '18 at 18:54
very useful. Thanks – huykon225 Jan 17 '20 at 16:44
This line isn't working for me, download is still in the menu config={{ file: { attributes: { controlsList: 'nodownload' } } }} – Dan Oct 01 '21 at 10:14

How to modify the controls of React Player while playing the mp4 file. I want the option of getting downloaded be disabled

1 Answers1