有没有办法使用 Video.js 从视频标签中获取当前字幕的文本？

Posted 2023-05-08

【中文标题】有没有办法使用 Video.js 从视频标签中获取当前字幕的文本？

【英文标题】：Is there any way to get current caption's text from video tag using Video.js?

【发布时间】：2015-11-09 16:16:18

【问题描述】：

我想在播放视频期间获取当前字幕的文本（而不是实现自己的字幕块（即隐藏原始字幕）并以几种不同的方式使用这些信息）。目前我为我的播放器使用videojs。有没有办法从中获取当前字幕的字符串？

【问题讨论】：

VideoJs TextTracks Cues empty的可能重复

【参考方案1】：

此代码获取当前提示并放入<span> 元素

(function()

    var video = document.querySelector('video');
    var span = document.querySelector('span');

    if (!video.textTracks) return;

    var track = video.textTracks[0];
    track.mode = 'hidden';

    track.oncuechange = function(e) 

        var cue = this.activeCues[0];
        if (cue) 
            span.innerhtml = '';
            span.appendChild(cue.getCueAsHTML());
        

    ;
)()

这里是教程：Getting Started With the Track Element

【参考方案2】：

是的，您可以在视频加载时添加 cuechange 事件监听器。这可以获得当前曲目的标题文本。 Here 是我使用 videojs 的工作示例。

【讨论】：

有没有办法在纯JS上实现？

【参考方案3】：

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; 
var textTrack = textTracks[0]; 
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode

试试这个

【讨论】：

您的方法不错，但要获取文本内容，您必须到达textTrack.cues，这将提供所有 vtt 提示，然后获取它们的 text 属性。

另外，video.js 确实为 firefox 提供了一个自定义后备（不知道为什么 btw），它不会填充视频的 textTracks 属性

【参考方案4】：

使用 HTML5 Video API 获取当前源，使用 / 和 . 拆分 src 以获取名称。

Media API

以上链接包含 HTML5 视频播放器中所有可用的 API。您的插件使用 HTML5 视频播放器！

【讨论】：

嗯，这真的能回答问题吗？

【参考方案5】：

解决方案：

    videojs("example_video_1").ready(function() 
        myvideo = this;

        var aTextTrack =  this.textTracks()[0];
        aTextTrack.on('loaded', function() 
            console.log('here it is');
            cues = aTextTrack.cues();   //subtitles content is here
            console.log('Ready State', aTextTrack.readyState()) 
            console.log('Cues', cues);
        );

        //this method call triggers the subtitles to be loaded and loaded trigger
        aTextTrack.show();
    );

---

结果：

---

附言。找到代码here。