JavaScript中视频文件的嵌入与Blob流式播放详解

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

// 获取或创建一个容器元素
const container = document.getElementById('video-container') || document.body;

// 创建 video 元素
const videoElement = document.createElement("video");
videoElement.controls = true; // 添加播放控件
videoElement.width = 640;
videoElement.height = 360;

// 创建 source 元素
const sourceElement = document.createElement("source");
sourceElement.setAttribute('src', 'video.mp4'); // 设置视频文件路径
sourceElement.setAttribute('type', 'video/mp4'); // 设置MIME类型

// 将 source 元素添加到 video 元素
videoElement.appendChild(sourceElement);

// 将 video 元素添加到页面
container.appendChild(videoElement);

console.log("视频元素已动态添加到页面。");

// 这是一个常见的错误示例！
var file = new Blob(["./video.mp4"], {"type": "video/mp4"});
var value = URL.createObjectURL(file);
console.log(value); // 输出一个blob URL，但实际播放会失败
// video.src = value; // 播放时会报错：DOMException: The element has no supported sources.

async function streamVideoFromBlob(videoUrl) {
  try {
    // 1. 发起网络请求获取视频数据，指定响应类型为 'blob'
    const response = await fetch(videoUrl);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 2. 获取响应体作为 Blob 对象
    const videoBlob = await response.blob();

    // 3. 创建一个临时的 Blob URL
    // URL.createObjectURL() 会创建一个DOMString，其中包含一个唯一的URL，
    // 该URL可用于表示参数中的File或Blob对象。
    const blobUrl = URL.createObjectURL(videoBlob);

    // 4. 获取或创建一个 video 元素
    const videoElement = document.getElementById('myVideo') || document.createElement('video');
    if (!document.getElementById('myVideo')) {
      videoElement.id = 'myVideo';
      document.body.appendChild(videoElement);
    }

    // 5. 将 Blob URL 赋值给 video 元素的 src 属性
    videoElement.src = blobUrl;
    videoElement.controls = true;
    videoElement.autoplay = false; // 避免自动播放，提供更好的用户体验
    videoElement.width = 640;
    videoElement.height = 360;

    // 6. 监听视频加载完成事件，并在不再需要Blob URL时释放资源
    videoElement.addEventListener('loadedmetadata', () => {
      console.log('视频元数据已加载，可以播放。');
      // 视频加载完成后，Blob URL 的引用计数增加。
      // 在某些浏览器中，即使视频播放结束，Blob URL 也可能不会自动释放。
      // 因此，在确定不再需要该URL时，调用 revokeObjectURL 是最佳实践。
      // 实际应用中，可以在视频播放完毕或元素被移除时调用。
      // 例如：videoElement.addEventListener('ended', () => URL.revokeObjectURL(blobUrl));
    });

    videoElement.addEventListener('error', (e) => {
      console.error('视频播放错误:', e);
      console.error('错误详情:', videoElement.error);
      // 错误类型：
      // MediaError.MEDIA_ERR_ABORTED (1): 媒体数据下载中断。
      // MediaError.MEDIA_ERR_NETWORK (2): 网络错误导致媒体下载失败。
      // MediaError.MEDIA_ERR_DECODE (3): 媒体解码错误。
      // MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED (4): 媒体源不支持。
    });

    console.log("Blob URL 已设置:", blobUrl);
    return blobUrl; // 返回 Blob URL，以便后续可能需要撤销
  } catch (error) {
    console.error('流式播放视频失败:', error);
    return null;
  }
}

// 调用函数，假设 'sample-video.mp4' 是一个可访问的视频文件
// 在实际项目中，这可能是从API获取的视频URL
const videoFileUrl = 'video.mp4';
let currentBlobUrl = null;
streamVideoFromBlob(videoFileUrl).then(url => {
  currentBlobUrl = url;
  // 如果需要，可以在某个时刻手动释放 Blob URL
  // setTimeout(() => {
  //   if (currentBlobUrl) {
  //     URL.revokeObjectURL(currentBlobUrl);
  //     console.log('Blob URL 已撤销。');
  //   }
  // }, 60000); // 1分钟后撤销，仅作示例
});