问题标签 [vtt]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
32 浏览

html - 获取视频当前的 vttcue 帧信息

我正在尝试构建一个实时视频字幕编辑器,并要求我获取当前视频帧的 VTTCue 信息(开始时间、结束时间、文本)。我该怎么做呢?谢谢。

0 投票
2 回答
4827 浏览

html5-video - 如何为 html5 视频加载 vtt 文件启用 CORS?

我的需要

html5 视频元素加载保存在不同域中的视频和 vtt 文件。

问题

vtt 未加载和错误Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.

我的调查

我知道需要使用 CORS,以便 vtt 可以成功加载到 html5 中。

我已经在服务器端为来自任何域的请求启用了 CORS。

有些文章说添加crossorigincrossorigin="anonymous"到`元素可以完成这项工作,但它不起作用。根本没有加载视频或出现不同的错误

我把我的代码放在下面

0 投票
0 回答
428 浏览

video.js - Chromecast 字幕无法正常工作

我从几个小时开始就在寻找一种方法来完成这项工作。我需要在 chromecast 上的文件 (VTT) 中显示字幕。

我有一个带有字幕和 chromecast 插件的 VideoJS 播放器。

这是我的代码:

视频和字幕在没有 chromecast 的情况下运行良好,但是当我启动 Chromecast 时,视频上没有字幕。

谁能帮我?

谢谢

0 投票
1 回答
714 浏览

vuejs2 - Vuejs 2 v-html没有触发锚事件

我正在使用 JW Player 和 Vuejs 创建一个应用程序。我需要显示让人想起的 vtt 文件(https://www.ted.com/talks/julio_gil_future_tech_will_give_you_the_benefits_of_city_life_anywhere/transcript),用户可以在其中单击并移至视频的特定部分。我可以获取 vtt 文件并使用“v-html”属性显示它们,这有助于使用换行符和格式呈现成绩单。我被卡住的是锚标签不接受“@click”事件,因为它被呈现为 HTML。有没有办法我可以触发 vuejs evetns

我也尝试使用动态组件,但到目前为止没有运气。有什么帮助吗?

0 投票
1 回答
91 浏览

jquery - 使用全局按钮关闭多个视频的隐藏式字幕

我有一个页面包含多个带有不同标题的 HTML5 视频 (webvtt)。视频控件被隐藏。我有一个 ID 为 #check 的按钮«添加字幕»。如果用户选中此按钮,则所有视频都应显示字幕,如果未选中,则字幕应隐藏。到目前为止我所拥有的:

默认隐藏字幕:

如果按钮被选中/取消选中,显示/隐藏标题:

这非常有效,但仅适用于第一个视频(因为轨道 [0] 仅提供第一个轨道的值)。我能做些什么来解决这个问题,还是我走错了路?

0 投票
1 回答
1256 浏览

html - .vtt 字幕未显示在 Chrome 中的视频上

我正在尝试创建带有 .vtt 字幕的(.mp4 格式)视频。唯一出现在屏幕上的是视频中心的一两条黑线,字幕应该是,并且仅在 Chrome 上。它在例如 Edge 中运行良好。他们为什么不出现?文件被上传到服务器。

.vtt 文件(示例):

截屏:

黑线截图

0 投票
2 回答
2869 浏览

javascript - 获取 Openload VTT 字幕链接

我想使用 Greasemonkey 为 Openload VTT 字幕添加字幕下载按钮。但是,我不知道如何访问<track>标签。

举个例子,这个带有英文字幕的法语视频剪辑。当我查看 Firefox 中的源代码时,我发现:

为什么我的概念验证 Greasemonkey 代码不起作用?

(当我运行脚本时,我收到消息“<track> NOT found!”。)

0 投票
1 回答
1174 浏览

javascript - 如何在视频的 vtt 中强制换行

我正在使用视频轨道标签在我的视频中插入字幕和标题。我有一个 vtt 文件,但我需要在第 1 行和第 2 行之间换行。文本显示在正确的位置,但在一行上。请问如何在演讲者和他的标题之间强制换行?vtt 文件中的简单中断不会这样做。

vtt:

HTML:

javascript:

CSS:

0 投票
2 回答
689 浏览

angular - IE vtt轨道背景颜色

为什么 IE 加载 .vtt 没有黑色背景而 chromes 加载,需要 IE 正常并且有黑色背景搜索没有占上风。

对此问题的任何帮助将不胜感激。

HTML:

CSS

铬合金: 铬合金:

IE: IE

0 投票
1 回答
3666 浏览

html - html5 MKV 带字幕播放

我正在尝试在我的 chrome 浏览器中播放带有字幕的 MKV 文件,以便查看本地视频文件。这已经成功,在 Microsoft Edge 中使用上述方法/代码,但是,当我使用 chrome 时,我看不到字幕(不能使用 Firefox,因为不支持 MKV)


文件结构

  • chrome MKV播放器//(根目录)
  • file.mkv //(视频文件)
  • file.vtt //(字幕文件)
  • RUN.html //(显示视频的html文件)

此方法基于此 github 存储库“https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions”


我有:

  • 尝试使用不同的字幕格式(vtt、stl、ass、srt)