带有base64的Html5视频源答案

【问题标题】：Html5 video source with base64带有base64的Html5视频源
【发布时间】：2018-04-04 01:52:49
【问题描述】：

我正在尝试播放用 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;

【问题讨论】：

您的 base64 数据只是字符串 "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"。绝对不是 mp4 文件的二进制数据。为什么不直接传递url，不经过dataURI。
因为我想稍微保护一下来源。
算了。想要的人会找到的。
如果不单独使用 javascript，即使使用 php，当然也没有针对视频下载者的方法？
那么 youtube 无法保护自己免受这种情况的影响。即使有像 DRM 这样的技术让它变得更难，也没有真正的防弹解决方案。

标签： base64 html5-video

【解决方案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)
  }
})

您可以这样做，但不建议这样做。您应该使用 objectURL 而不是 dataURL。

【讨论】：

【解决方案2】：

function displayVideo (blob){
  var video = document.getElementById("video");
  video.src = window.URL.createObjectURL(blob);
}

【讨论】：

一般来说，如果答案包含对代码的用途的解释，以及为什么在不介绍其他人的情况下解决问题的原因，答案会更有帮助。