在 HTML5 播放器上使用 Dash 流的 ROKU 和 LG 电视上的 WEBVTT 字幕问题

Question

WebVTTV 字幕无法在使用 webvtt 字幕的 dash 流上工作。我的应用程序使用本机 HTML5 播放器，我可以在 mpeg-dash chrome 插件的帮助下看到字幕确实加载。然而，在我测试的海信、ROKU、TCL 等不同智能电视上，视频播放时没有字幕，而且 LG 电视会崩溃。

我可以在网络日志中看到，它根本不请求文本流。 WebVTTV 文件中有样式和定位信息，想知道这是否是问题所在。但是，我也没有看到对 WebVTTV 文件的请求，因为我可以看到我是否在 chrome Dash 插件中测试了相同的内容。

测试码流：http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26 %20系统比特率%20%3C%203500000)

视频标签示例：

<video id="mediaPlayerVideo" preload="auto" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"><source src="http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26%20systemBitrate%20%3C%203500000)" type="application/dash+xml"></video>

无法找出问题，因为我在调试时在电视浏览器的网络日志中没有看到任何内容。

我想知道是否是因为它无法解析webvttv文件“textstream_eng=1000.webvtt”的url。

更新：我可以看看是否是 m3u8，我可以看到使用 webvttv 文件播放的字幕

Answer 1

您提到的智能电视上的原生 HTML5 视频播放器可能不完全支持带有

DASH

字幕的

WebVTT

。不同设备之间的行为不一致表明这可能是设备特定的限制。

此外，正如您提到的，字幕可与

m3u8 (HLS)

文件配合使用，您可以考虑为不支持带有

HLS

字幕的

DASH

的设备提供替代

WebVTT

流。我将通过实现一个简单的功能检测脚本来实现此目的，该脚本检查设备是否支持带有 WebVTT 字幕的 DASH 格式，如果不支持，则切换到 HLS 流。该脚本看起来像：

function doesSupportDashWithWebVTT() {
  const video = document.createElement("video");

  // Check if the browser supports DASH
  if (!video.canPlayType('application/dash+xml')) {
    return false;
  }

  // Check if the browser supports WebVTT
  if (!video.canPlayType('text/vtt')) {
    return false;
  }
  return true;
}

const videoElement = document.getElementById("mediaPlayerVideo");
const dashSrc = "http://vod-pbsamerica.simplestreamcdn.com/pbs/encoded/394438.ism/manifest.mpd?filter=(FourCC%20!%3D%20%22JPEG%22%20%26%26%20systemBitrate%20%3C%203500000)";
const hlsSrc = "your_hls_stream.m3u8";

if (doesSupportDashWithWebVTT()) {
  videoElement.innerHTML = `<source src="${dashSrc}" type="application/dash+xml">`;
} else {
  videoElement.innerHTML = `<source src="${hlsSrc}" type="application/vnd.apple.mpegurl">`;
}

问。我想知道是否是因为它无法解析webvttv文件“textstream_eng=1000.webvtt”的url？

要验证该 URL 是否导致问题，您可以使用具有标准命名约定（例如“textstream_eng_1000.webvtt”）的不同 WebVTT 文件 URL 进行测试，并查看字幕是否正确显示。