能否将视频及Manifest文件嵌入网页iframe以规避S3存储交互？

你的需求完全可行，下面提供两种无需依赖外部存储的实现方案，均不需要修改播放器逻辑：

方案一：Service Worker 请求拦截（推荐，兼容性最优） #

通过Service Worker在浏览器层面拦截播放器对Manifest和视频文件的请求，直接返回iframe内预嵌入的内容，播放器会认为是正常的HTTP请求响应。

完整实现代码 #

<html>
<head>
  <script>
    // 注册内嵌的Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('data:text/javascript;base64,' + btoa(`
        self.addEventListener('fetch', (event) => {
          const url = new URL(event.request.url);
          // 拦截指定路径的请求
          if (url.pathname === '/video-manifest' || url.pathname === '/packaged-video') {
            event.respondWith(
              new Promise((resolve) => {
                // 向主页面请求文件内容
                self.clients.matchAll().then(clients => {
                  clients.forEach(client => {
                    client.postMessage({ 
                      type: 'GET_FILE', 
                      id: url.pathname.slice(1) 
                    });
                  });
                });
                // 接收主页面返回的内容并构造响应
                const messageListener = (msg) => {
                  if (msg.data.type === 'FILE_CONTENT' && msg.data.id === url.pathname.slice(1)) {
                    self.removeEventListener('message', messageListener);
                    const headers = new Headers();
                    if (msg.data.id === 'video-manifest') {
                      // 根据Manifest类型设置对应Content-Type：HLS用application/vnd.apple.mpegurl，DASH用application/dash+xml
                      headers.append('Content-Type', 'application/vnd.apple.mpegurl');
                    } else {
                      headers.append('Content-Type', 'video/mp4');
                    }
                    resolve(new Response(msg.data.content, { headers }));
                  }
                };
                self.addEventListener('message', messageListener);
              })
            );
          }
        });
      `)).then(() => console.log('Service Worker 注册成功'));
    }

    // 预存嵌入的文件内容
    const embeddedFiles = {
      'video-manifest': document.querySelector('#video-manifest').textContent,
      'packaged-video': atob(document.querySelector('#packaged-video').textContent)
    };

    // 接收Service Worker的文件请求并返回内容
    navigator.serviceWorker.addEventListener('message', (event) => {
      if (event.data.type === 'GET_FILE') {
        event.source.postMessage({
          type: 'FILE_CONTENT',
          id: event.data.id,
          content: embeddedFiles[event.data.id]
        });
      }
    });

    // 设置播放器使用的Manifest URL（对应拦截路径）
    var manifestURL = "/video-manifest";
  </script>
</head>
<body>
  <!-- 隐藏的Manifest内容，注意将其中的视频URL替换为"/packaged-video" -->
  <div id="video-manifest" style="display: none">
    #EXTM3U
    #EXT-X-VERSION:3
    #EXT-X-TARGETDURATION:10
    #EXT-X-MEDIA-SEQUENCE:0
    #EXTINF:10.0,
    /packaged-video
    #EXT-X-ENDLIST
  </div>

  <!-- 隐藏的视频Base64内容（仅保留编码部分，去掉data:前缀） -->
  <div id="packaged-video" style="display: none">
    R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Qd...（此处替换为你的视频Base64编码）
  </div>

  <!-- 你的播放器代码 -->
  <video>
    <source src="" type="application/vnd.apple.mpegurl">
  </video>
</body>
</html>

核心说明 #

• Service Worker会拦截播放器对/video-manifest和/packaged-video的请求，直接返回iframe内的预存内容
• 完全模拟真实HTTP请求，播放器无需任何修改就能正常加载
• 需根据你的Manifest类型（HLS/DASH）调整Content-Type参数

方案二：直接使用Data URI（实现简单，兼容性有限） #

部分现代播放器支持直接加载Data URI作为Manifest或视频源，无需额外拦截逻辑。

实现代码 #

<html>
<script>
  // 视频文件的Base64编码
  const videoBase64 = "R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Qd...";
  const videoDataURI = `data:video/mp4;base64,${videoBase64}`;

  // 构造Manifest内容，将其中的视频URL替换为视频的Data URI
  const manifestContent = `
    #EXTM3U
    #EXT-X-VERSION:3
    #EXT-X-TARGETDURATION:10
    #EXT-X-MEDIA-SEQUENCE:0
    #EXTINF:10.0,
    ${videoDataURI}
    #EXT-X-ENDLIST
  `;

  // 将Manifest转为Data URI，作为播放器的加载地址
  var manifestURL = `data:application/vnd.apple.mpegurl;base64,${btoa(manifestContent)}`;
</script>
<!-- 你的播放器代码 -->
</html>

注意事项 #

• 并非所有播放器都支持Data URI作为Manifest源，尤其是原生播放器或旧版本播放器
• 视频文件100-200KB，Base64编码后体积会增加约33%，完全在浏览器处理能力范围内

方案选择建议 #

• 优先选择Service Worker方案，兼容性覆盖绝大多数播放器，完全模拟真实请求流程
• 若确认目标播放器支持Data URI，可选择方案二，实现更简洁

内容的提问来源于stack exchange，提问作者SamTest