播放Base64编码的HTML5视频失败，未编码可正常播放，求问原因

数据老陈

2026-5-22

问题原因与解决方法

嘿，这个问题的核心其实是你编码错了对象，我给你拆解清楚：

为什么你的代码不能工作？

你当前用btoa(s)编码的是视频文件的URL字符串（也就是"http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"这段文本），而不是视频文件本身的二进制内容。

浏览器解析data:video/mp4;base64,xxx时，会把xxx解码成二进制数据，然后尝试当作MP4视频来播放。但你这里解码后得到的只是原来的URL文本，根本不是视频文件的二进制流，自然无法正常播放。

而直接给video.src = s时，浏览器会自动向这个URL发起请求，获取到真正的视频二进制文件，所以能正常播放。

正确的Base64视频加载方式

如果一定要用Base64编码的视频作为数据源，你需要先获取视频文件的二进制内容，再把它转成Base64格式。可以用Fetch API结合FileReader来实现：

var videoUrl = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
var video = document.createElement('video');
document.body.appendChild(video);
video.autoplay = true;
video.controls = true;

// 先获取视频二进制，再转成Base64的data URI
fetch(videoUrl)
  .then(response => {
    if (!response.ok) throw new Error('请求视频失败');
    return response.blob();
  })
  .then(blob => {
    const reader = new FileReader();
    reader.onload = function(e) {
      // reader.result已经是完整的data:video/mp4;base64,...格式
      video.src = e.target.result;
    };
    reader.readAsDataURL(blob);
  })
  .catch(err => console.error('加载出错:', err));