使用Base64的HTML5视频源

Question

我试图播放使用base64编码的html5视频，但它无法工作。如果不进行编码，它是可以正常播放的。问题出在哪里呢？

var s = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
var video = document.createElement('video');
document.body.appendChild(video);
video.src = "data:video/mp4;base64," + btoa(s);//not working
//video.src = s;//works
video.autoplay = true;
video.controls = true;

- Toniq

---

您的base64数据只是字符串“http://clips.vorwaerts-gmbh.de/VfE_html5.mp4”。绝对不是mp4文件的二进制数据。为什么不直接传递URL，而不是通过dataURI？ - Kaiido

因为我想要在一定程度上保护源代码。 - Toniq

忘掉它吧。那些想要的人会找到它的。 - Kaiido

当然，即使只使用PHP而不是JavaScript，也没有方法可以防止视频下载器吧？ - Toniq

YouTube 无法保护自己免受此类侵害。即使有像 DRM 这样的技术可以增强安全性，但并没有真正防弹的解决方案。 - Kaiido

Answer 1

var s = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
fetch(s).then((res) => res.blob()).then((blob) => {
  const fileReader = new FileReader()
  fileReader.readAsDataURL(blob)
  fileReader.onload = () => {
    const videoEl = document.createElement('video')
    videoEl.src = fileReader.result
    videoEl.controls = true
    document.body.appendChild(videoEl)
  }
})

你可以这样做，但不建议。你应该使用对象URL而不是数据URL。

- kaijun

---

你的代码中 Base64 在哪里？另外，你的代码在 fetch() 函数处抛出了一个错误。 - Garric

fileReader.readAsDataURL 返回一个 base64 编码的字符串。 - undefined

Answer 2

function displayVideo (base64){
  var video = document.getElementById("video");
  var binaryString = atob(base64String);
  var blob = new Blob([binaryString], {type: "video/mp4"}); // Replace "video/mp4" with the type MIME of your video
  video.srcObject = window.URL.createObjectURL(blob);
}

- Tactic Rayan

---

通常情况下，如果答案包括代码的解释以及为什么这样做可以解决问题而不会引入其他问题，那么它们会更有帮助。 - DCCoder

你的代码中哪里有 Base64？ - Garric

Answer 3

 let reader;
    reader = new FileReader();
    return new Promise((resolve) => {
      reader.readAsDataURL(files);
      reader.onload = (data) => {
        resolve(data.target.result);
      };
    });

- Manikandan Prabhu

---

这对 kaijun 2021 年的回答有什么补充？ - greybeard