Chrome中播放.ts视频报错（MP4正常）的Angular解决方案求助

尝试在Chrome中播放.ts文件时出现错误：

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

现有播放函数可正常处理MP4格式，但无法支持.ts格式，函数代码如下：

var vid;
function play_video(video, width, height) {
  if (vid == null) {
    vid = document.createElement("video");
    document.body.appendChild(vid);
  }
  vid.source = { src: video, type: "video/ts" };
  vid.width = width;
  vid.height = height;
  vid.loop = true;
  vid.muted = true;
  vid.src = video;
  vid.type = "video/ts";
  vid.play();
}

问题分析与修改方案 #

Chrome原生对MPEG-TS（.ts）格式的支持需要正确配置，原函数存在核心问题：错误的MIME类型使用方式，以及直接给video元素赋值source属性的写法错误。以下是修正后的代码及关键说明：

修正后的播放函数

var vid;
function play_video(video, width, height) {
  if (vid == null) {
    vid = document.createElement("video");
    document.body.appendChild(vid);
    // 添加错误监听，便于排查问题
    vid.addEventListener('error', function(e) {
      console.error('视频加载错误:', e);
      console.error('错误详情:', vid.error);
    });
  }
  
  // 清空旧的source元素，避免重复添加导致冲突
  while (vid.firstChild) {
    vid.removeChild(vid.firstChild);
  }
  
  vid.width = width;
  vid.height = height;
  vid.loop = true;
  vid.muted = true;
  
  // 创建标准的source元素并配置
  var source = document.createElement('source');
  source.src = video;
  source.type = 'video/MP2T'; // MPEG-TS的标准MIME类型
  vid.appendChild(source);
  
  // 加载视频并处理播放Promise
  vid.load();
  vid.play().catch(err => {
    console.error('播放操作失败:', err);
  });
}

关键修改点

1. 修正MIME类型：使用标准的video/MP2T而非自定义的video/ts，Chrome对标准MIME类型的识别更可靠
2. 使用子元素：video元素没有source属性，正确做法是创建<source>子元素添加到video中，让浏览器自动检测格式支持
3. 清空旧资源：重复调用函数时，先移除之前的source元素，避免资源冲突
4. 错误监听与Promise处理：添加错误监听可快速定位文件路径、编码不支持等问题；play()返回Promise，用catch捕获异步播放失败的情况

额外注意事项

• 如果你的.ts文件是HLS直播流（由多个.ts切片组成），Chrome原生不支持HLS，需要使用HLS.js这类库来解析播放
• 确保.ts文件的编码是Chrome支持的（如H.264视频+AAC音频），编码不兼容也会触发"无支持源"错误

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