LWC中video标签字幕（Captions）无法显示的问题求助

以下是针对你遇到的问题的具体排查和解决步骤：

1. 修复跨域与资源路径问题 #

• 必须使用完整带协议的URL：你的videoUrl和myTrackFileUrl都缺少https://前缀，正确格式应为：

  connectedCallback() {
      this.videoUrl = 'https://xyz.amazonaws.com/myVideoPath';
      this.myTrackFileUrl = 'https://xyz.amazonaws.com/myTrackFileUrl';
  }
  

• 配置AWS S3 CORS规则：确保S3桶的CORS允许Salesforce域名访问，示例规则：

  <?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
      <CORSRule>
          <AllowedOrigin>https://your-salesforce-domain.my.salesforce.com</AllowedOrigin>
          <AllowedMethod>GET</AllowedMethod>
          <AllowedHeader>*</AllowedHeader>
      </CORSRule>
  </CORSConfiguration>
  

• 添加Salesforce CSP信任站点：在Salesforce Setup中找到「CSP Trusted Sites」，添加https://xyz.amazonaws.com，勾选「Allow site for script sources」和「Allow site for style sources」等必要权限。

2. 确保字幕文件格式与服务器配置正确 #

• 优先使用WebVTT格式：SRT部分浏览器支持有限，WebVTT格式必须严格符合规范，示例：

  WEBVTT
  
  00:00:00.000 --> 00:00:02.000
  第一句字幕内容
  
  00:00:02.500 --> 00:00:05.000
  第二句字幕内容
  

  注意：开头必须是WEBVTT，时间格式为HH:MM:SS.mmm，字幕块之间用空行分隔。
• 设置正确的MIME类型：在AWS S3中，将WebVTT文件的Content-Type设置为text/vtt，SRT文件设置为application/x-subrip。

3. 修正LWC中的DOM操作与标签属性 #

• 完善track标签属性：添加label和default属性，帮助浏览器识别并默认加载字幕：

  <video width="320" height="240" controls>
      <source src={videoUrl} type="video/mp4">
      <track src={myTrackFileUrl} kind="captions" srclang="en" label="English" default>
  </video>
  

• 优化renderedCallback中的事件监听：避免重复监听，使用loadedmetadata事件确保视频元数据加载完成后再设置字幕模式：

  videoInitialized = false;
  
  renderedCallback() {
      if (this.videoInitialized) return;
      this.videoInitialized = true;
      const videoEl = this.template.querySelector('video');
      if (videoEl) {
          videoEl.addEventListener('loadedmetadata', () => {
              const captionTrack = videoEl.textTracks[0];
              if (captionTrack) {
                  captionTrack.mode = 'showing';
              }
          });
      }
  }
  

4. 基础排查步骤 #

• 直接在浏览器地址栏打开字幕文件URL，确认文件能正常下载且内容格式正确；
• 在普通静态HTML页面中测试相同的video和字幕配置，排除LWC环境外的问题；
• 查看浏览器控制台是否有404、CORS或其他加载错误，针对性解决。

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