如何从视频元素中删除下载按钮？答案

【问题标题】：How to remove the Download button from video element?如何从视频元素中删除下载按钮？
【发布时间】：2020-06-13 14:57:45
【问题描述】：

我有一个网站，用户可以在该网站上使用 signedUrl 访问我保存在 Google Cloud Storage 上的存储桶中的视频，但该视频具有下载选项：

我不想允许此按钮，我希望视频仅用于预览。我怎样才能做到这一点？我在 GCS 文档 (https://googleapis.dev/nodejs/storage/latest/index.html) 中没有找到任何内容。

我在后端使用 NodeJs，我正在创建如下签名的 URL：

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);

【问题讨论】：

即使您删除了下载选项，如果用户想要下载该视频，我相信他们会通过搜索视频源/路径找到另一种方式，或者甚至可能有一个检测视频的浏览器插件在浏览器中播放/加载并为他们提供下载。我认为您这样做的唯一可能方法是创建一个会话/令牌，如果它在很长一段时间后没有更新，它就会过期，但即使这是一个解决方案的猜测。
我知道如果他想下载它，他会下载它，但是我想删除下载按钮至少让它更难一些。你知道我该怎么做吗？ @NewToJS
@HenriqueRamos 请提供页面链接。
@AndrewL64 我把这个链接给你看：shorturl.at/JV059

标签： javascript node.js google-cloud-platform google-cloud-storage cloud

【解决方案1】：

您可以使用 HTMLMediaElement 接口的controlsList 属性从视频元素中删除下载按钮。

只需在页面加载后使用setAttribute 方法将值为nodownload 的controlslist 属性添加到您的视频元素，它应该会为您删除下载选项。

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

检查并运行以下代码片段以获取上述方法的实际示例：

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

&lt;video controls="" autoplay="" name="media"&gt;&lt;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;amp;Expires=1583025155&amp;amp;Signature=bScPwZkEhJVjt8mEQMT0BeE8CdQLoqPb5CrxLd%2BLUTd%2BF6ypL3eNVe3oGSxiRM4nWpfESlA32PgsrQ417%2FZrWuT%2FxZoeyQmSxW0G4ksZjG%2FNWBnsMGBRP7D6a2nJsuS%2BYy82anismfaBKtKEhTRhF6EehC3YRQD5BqgeJ8Q4yU3u9IeI9WWwr8aeQJUt2PafWiNADGz9rk4hR%2BdWl3SHR5sj9fZf6k8%2BSyW3ZKPsd%2BzGGrX6QhpkKYXCxf%2FioedEClbFriWKYfKhpZGvkSdmYSv9ZHHUD0%2ByjiXRHWZrO8QOvIQd2kUDATC%2B6EARuHk0jcQmapOAkm2S4k6rwwolbg%3D%3D" type="video/mp4"&gt;&lt;/video&gt;

【讨论】：

【解决方案2】：

Cloud Storage 不提供该按钮。它由查看内容的浏览器提供。所有公共下载 URL 都可以通过直接访问 URL 来下载，而且真的没有办法阻止它。任何拥有该 URL 的人都可以随时下载内容。如果您只想允许播放并停止所有直接下载，Cloud Storage 不是您正在寻找的解决方案。您需要改用一些加密的视频流服务。

【讨论】：

你有什么建议？
我建议对满足您特定需求的产品进行一些网络搜索。我从来没有使用过它们中的任何一个