使用hls.js加载AWS S3中m3u8文件时遭遇_typeof未定义错误

我尝试加载存储在AWS S3上的m3u8文件，代码如下：

JS代码 #

var video = document.getElementById('video');
var videoSrc = "https://my-file-link.m3u8";
if (Hls.isSupported()) {
  console.log("creating");
  var hls = new Hls();
  console.log("loading");
  hls.loadSource(videoSrc);
  console.log("attaching");
  hls.attachMedia(video);
  console.log("finished");
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = videoSrc;
}

HTML代码 #

<div class="wrapper">
  <video id="video"></video>
</div>

但文件无法加载，控制台日志显示：

creating
loading
attaching
finished
Uncaught ReferenceError: _typeof is not defined
    at enableLogs (...)
    at ...

注释掉hls.attachMedia(video);后错误消失，但视频无法加载。我使用Chrome访问站点，站点基于npm构建。猜测CORS并非问题所在，因为该视频可在第三方HLS播放器正常播放。

请问该问题的原因是什么？如何让视频在我的站点上正常播放？是否还需要我提供其他信息？

错误原因 #

_typeof is not defined这个错误核心原因是hls.js代码未被项目的babel正确转译：

• 部分版本的hls.js包含babel编译生成的_typeof辅助函数，但npm项目默认会排除node_modules目录下的文件转译，导致浏览器无法识别该函数。
• 也可能是你使用的hls.js版本过旧，存在兼容性遗留问题。

修复步骤 #

1. 升级hls.js到最新稳定版
   在项目根目录执行命令：

   npm install hls.js@latest --save
   

   新版本的hls.js已修复这类转译相关的兼容性问题。

2. 调整babel配置，确保hls.js被转译
   如果你的项目自定义了babel配置（如babel.config.js或.babelrc），且配置了排除node_modules转译，需要把hls.js加入转译白名单：

   module.exports = {
     presets: ['@babel/preset-env'],
     include: [
       /node_modules\/hls.js/ // 让babel处理hls.js的代码
     ]
   };
   

   若使用Create React App这类脚手架，需借助react-app-rewired工具修改默认配置，确保hls.js被转译。

3. 备选方案：直接引入UMD版本的hls.js
   绕过npm模块的转译问题，直接在HTML中通过CDN引入hls.js的UMD版本：

   <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
   

   浏览器可直接识别运行该版本代码，无需经过项目的babel转译。

4. 确认S3 CORS配置（可选）
   虽你提到视频在第三方播放器可播放，仍建议确认S3桶的CORS规则是否允许你的站点域名访问，规则示例：

   <?xml version="1.0" encoding="UTF-8"?>
   <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
   <CORSRule>
       <AllowedOrigin>https://你的站点域名</AllowedOrigin>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>
   

补充排查信息 #

若以上步骤未解决问题，可提供以下信息帮助进一步定位：

• 项目使用的babel版本及配置文件内容
• hls.js的具体版本号
• 项目的脚手架类型（如Create React App、Vue CLI等）

内容的提问来源于stack exchange，提问作者The Blind Hawk