CODEWITHSUNDEEP
javascriptnode.jsgoogle-cloud-platformgoogle-cloud-storagecloud
Henrique Ramos
Henrique Ramos

Reputation: 786

How to remove the Download button from video element?

I have a website where the user can access a video that is saved in my bucket on Google Cloud Storage with the signedUrl, but the video has the Download option:

enter image description here

and I don't want to allow this button, I want the video to be just for preview. How can I do this? I didn't find anything in the GCS documentation (https://googleapis.dev/nodejs/storage/latest/index.html).

I'm using NodeJs for the back end and I'm creating the signedUrl like this:

var expiry = new Date(Date.now() + 120000);
const file = bucket.file(req.file.cloudStorageObject);
const config = {
  action: "read",
  expires: expiry
};

file.getSignedUrl(config, function(err, url) {
  if (err) {
    console.error(err);
    return;
  }

  // The file is now available to read from this URL.
  request(url, function(err, resp) {
    console.log(444444, url);
  });
});
res.send(200);

Upvotes: 3

Views: 2995

Answers (2)

AndrewL64
AndrewL64

Reputation: 16321

You can use the controlsList property of the HTMLMediaElement interface to remove the download button from your video element.

Just use the setAttribute method to add the controlslist attribute with a value of nodownload to your video element after the page loads and it should remove the download option for you.

document.querySelector('video').setAttribute("controlslist", "nodownload");

Check and run the following Code Snippet for a practical example of the above approach:

document.querySelector('video').setAttribute("controlslist", "nodownload");
<video controls="" autoplay="" name="media"><source src="https://storage.googleapis.com/plataforma-redacao/1583013110538y2mate.com%20-%20OZZY%20OSBOURNE%20-%20Under%20The%20Graveyard%20%28Official%20Audio%29_fMAAMfHgO4Q_720p.mp4?GoogleAccessId=plataforma-redacao%40redacao-269717.iam.gserviceaccount.com&amp;Expires=1583025155&amp;Signature=bScPwZkEhJVjt8mEQMT0BeE8CdQLoqPb5CrxLd%2BLUTd%2BF6ypL3eNVe3oGSxiRM4nWpfESlA32PgsrQ417%2FZrWuT%2FxZoeyQmSxW0G4ksZjG%2FNWBnsMGBRP7D6a2nJsuS%2BYy82anismfaBKtKEhTRhF6EehC3YRQD5BqgeJ8Q4yU3u9IeI9WWwr8aeQJUt2PafWiNADGz9rk4hR%2BdWl3SHR5sj9fZf6k8%2BSyW3ZKPsd%2BzGGrX6QhpkKYXCxf%2FioedEClbFriWKYfKhpZGvkSdmYSv9ZHHUD0%2ByjiXRHWZrO8QOvIQd2kUDATC%2B6EARuHk0jcQmapOAkm2S4k6rwwolbg%3D%3D" type="video/mp4"></video>

Upvotes: 4

Doug Stevenson
Doug Stevenson

Reputation: 317808

That button is not provided by Cloud Storage. It's provided by the browser that's viewing the content. All public download URLs can be downloaded by directly accessing the URL, and there's really no way of stopping that. Anyone who has the URL can always download the content. If you only want to allow playback and stop all direct downloads, Cloud Storage is not the solution you're looking for. You'll need to use some encrypted video streaming service instead.

Upvotes: 1

Related Questions