javascript - 如何从视频元素中删除“下载”按钮？

Question

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

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

我使用 NodeJs 作为后端，并创建如下的signedUrl:

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

Answer 1

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

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

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

<小时/>

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

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>