javascript - 使用Shaka播放器显示WebVTT字幕或副标题

标签 javascript html5-video webvtt shaka

我正在使用 Shaka 播放器播放 HLS/DASH 视频,效果很好。

我还有 WebVTT 文件形式的字幕/副标题,这些文件未在 HLS/DASH list 中引用,目前正在使用单独的 <track> 进行加载。元素。

目前,我正在使用 TextTracks 的原生 HTML5 方法(例如使用 .oncuechange ),但这很尴尬,并且当有多个轨道时似乎无法正常工作。由于 Shaka 播放器似乎有自己的轨道解析,我想改用它的方法。

但是我似乎看不到任何用于管理 <track> 的文档(类似 https://shaka-player-demo.appspot.com/docs/api/tutorial-basic-usage.html )元素。有没有?有人有任何示例/codepen 等吗?

我没有使用 Shaka UI 库,并且有自己的“CC”按钮等。我只想使用 Shaka 功能而不是使用我自己的功能来控制轨道。

谢谢。

最佳答案

Shaka 玩家方法记录如下: https://shaka-player-demo.appspot.com/docs/api/shaka.Player.html .

可以使用 addTextTrackAsync() 方法添加外部 WebVTT 文件。 文档中有多种与文本管理相关的方法,这里列举几个:

  • getTextTracks() - 返回可用文本轨道的列表
  • selectTextTrack(track) - 选择特定轨道
  • setTextTrackVisibility(isVisible) - 启用或禁用文本显示
  • selectTextLanguage() - 选择特定语言

关于javascript - 使用Shaka播放器显示WebVTT字幕或副标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69048214/

相关文章:

google-chrome - Firefox、Chrome、Safari 对于 MP4 HTML5 视频有灰色背景

video-streaming - 在 video.js 中禁用 flash

html5-audio - 是否可以将 ttml 或 vtt 与 html 5 音频元素一起使用?

javascript - 使用 Javascript 将 .srt 转换为 .webvtt

javascript - document_start 和 document_end 处的 Chrome 扩展程序 content_script

javascript - 如何使用JS下载视频标签?

当 html onmouseenter 执行时,javascript mouseenter 不触发

javascript - ajax post成功后如何提交表单?

javascript - 无法使 MP4 电影高度更改并适合横向和纵向的 Material Box

javascript - JWPlayer 集成网页字幕