寻求修复：部分M3U8文件无法在VideoJS跨浏览器正常播放

针对你遇到的「Playback cannot continue. No available working or supported playlists.」报错，结合你的配置和场景，可按以下方向排查修复：

1. 检查M3U8编码兼容性 #

部分M3U8可能使用了VideoJS默认HLS解析器不支持的编码组合（比如特殊H.265编码、非标准音频编码）。可通过ffmpeg查看流编码信息：

ffmpeg -i https://mps.lib.harvard.edu/vod/_definst_/smil:s3/drs-delivery-prod/491690138.smil/playlist.m3u8

确保流采用H.264（avc1）+ AAC的标准组合，这是浏览器与VideoJS支持最广泛的编码格式。

2. 优化VideoJS的HLS配置 #

你的html5配置缺少HLS相关参数，补充后可提升兼容性：

const videoJsOptions = {
  autoplay: true,
  fluid: true,
  playbackRates: [0.5, 1, 1.5, 2],
  controls: true,
  responsive: true,
  aspectRatio: '16:9',
  techOrder: ['html5', 'youtube', 'vimeo'],
  youtube: { autohide: 1 , autoplay: false },
  poster: carouselID?.poster,
  html5: {
    nativeTextTracks: false,
    hls: {
      overrideNative: true, // 强制使用VideoJS内置HLS解析器，规避浏览器原生差异
      enableLowInitialPlaylist: true,
      smoothQualityChange: true,
      enableJavaScript: true // 开启SMIL格式流的解析支持
    }
  },
  sources: [{
    src: "https://mps.lib.harvard.edu/vod/_definst_/smil:s3/drs-delivery-prod/491690138.smil/playlist.m3u8",
    type: "application/x-mpegurl"
  }]
};

示例中M3U8路径包含smil:标识，开启enableJavaScript是处理SMIL流媒体的关键。

3. 排查跨域与资源有效性 #

• 检查浏览器控制台是否有CORS报错，若存在需在流媒体服务器配置CORS规则，允许你的React应用域名访问。
• 通过浏览器网络面板确认M3U8分片（.ts文件）能正常加载，避免因分片地址无效或资源失效导致播放失败。

4. 锁定适配的hls.js版本 #

VideoJS 7.20.2依赖的hls.js版本可能存在特定流的兼容问题，可手动指定稳定版本：

npm install hls.js@1.4.12 --save

初始化VideoJS前手动注册：

import Hls from 'hls.js';
import videojs from 'video.js';

videojs.Hls = videojs.Hls || {};
videojs.Hls.js = Hls;

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