正文 

当前位置： 首页 > 问答 >

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

     2023-05-08     26

关键词：

【中文标题】有没有办法使用 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。

【讨论】：

promql 中有没有办法使用 thanos api 获取所有可用的标签名称？

】promql中有没有办法使用thanosapi获取所有可用的标签名称？【英文标题】：Isthereawayinpromqltogetalltheavailablelabelnamesusingthanosapi?【发布时间】：2020-10-1903:50:58【问题描述】：我有一个promql，它从服务器向我提供整个度量结果，但我... 查看详情

有没有办法从通过 JavaScript 嵌入的 YouTube 视频中获取 CHAPTERS？

】有没有办法从通过JavaScript嵌入的YouTube视频中获取CHAPTERS？【英文标题】：IsthereawaytogetCHAPTERSfromaYouTubevideoembeddedviaJavaScript?【发布时间】：2021-11-0221:33:59【问题描述】：在包含这个YouTubeiframeAPI脚本之后https://www.youtube.com/iframe_api... 查看详情

有没有办法获取选项标签值并将其传递给车把中的助手？

】有没有办法获取选项标签值并将其传递给车把中的助手？【英文标题】：Isthereanywaytogetanoptiontagvalueandpassittoahelperinhandlebars?【发布时间】：2020-01-0306:49:54【问题描述】：我正在使用express和车把，所以我有一个视图，当客户端从... 查看详情

从html5中的视频标签中读取音频频谱

...读取音频频谱，让您创建用于播放曲目的频谱可视化器。有没有办法对WebVideoAPI做同样的事情？我想显示音频播放html5youtube视频的频谱。谢谢【问题讨论】：【参考方案1】：使用& 查看详情

使用 video.js 更改视频播放速度

】使用video.js更改视频播放速度【英文标题】：Changethevideoplaybackspeedusingvideo.js【发布时间】：2013-10-0709:08:28【问题描述】：是否有任何现有的插件可以使用video.js播放器更改视频的播放速率？如果没有，如何添加新插件和新控制... 查看详情

有没有办法从有天赋的聊天组件中修改标签道具？

】有没有办法从有天赋的聊天组件中修改标签道具？【英文标题】：Isthereawaytomodifythelabelpropfromthegifted-chatcomponent?【发布时间】：2019-11-1020:31:29【问题描述】：我正在使用GiftedChathttps://github.com/FaridSafi/react-native-gifted-chat/，但我需... 查看详情

使用 RoboSpice 有没有办法从异常中获取 HTTP 错误代码？

】使用RoboSpice有没有办法从异常中获取HTTP错误代码？【英文标题】：UsingRoboSpiceisthereawaytogettheHTTPErrorCodeoutofanexception?【发布时间】：2013-01-2915:28:52【问题描述】：我正在编写一个使用RoboSpice的应用程序。在请求侦听器onRequestFailu... 查看详情

有没有办法在不创建视频标签的情况下从 URL 获取 MediaStream

】有没有办法在不创建视频标签的情况下从URL获取MediaStream【英文标题】：IsthereawaytogetaMediaStreamfromanURLwithoutcreatingavideotag【发布时间】：2021-12-2420:12:27【问题描述】：来自https://***.com/a/21227589/130910：varstream=videoTag.captureStream()但... 查看详情

Safari 中受密码保护的目录中的 HTML5 视频

...rectoryinSafari【发布时间】：2012-10-1213:04:08【问题描述】：有没有人遇到过类似的问题，并找到了解决办法？我在受密码保护的目录中有一个页面，我想在其上显示视频，使用HTML5视频标签（使用video.js，视频标签是正确的，并且... 查看详情

如何在 video.js 中获取当前播放时间

...deo.js【发布时间】：2012-04-0920:43:43【问题描述】：我正在使用video.js项目在我的网页上播放视频。我在我的网页上完美地实现了它，但我需要检索视频的当前播放时间我该怎么做？【问题讨论】：【参考方案1】：varwhereYouAt=myPlaye... 查看详情

video.js组件在vue项目中的综合使用详解（多个视频+倍速播放）(代码片段)

...款开源且功能丰富的web视频组件Video.js在Vue项目中的综合使用详解（多个视频+倍速播放）开发中，使用video标签自带的属性难以达到我们实际所需要的效果；例如视频的倍速播放功能，利用原生代码重写一... 查看详情

有没有办法使用 JQuery 从 css 类中获取类定义或值？

】有没有办法使用JQuery从css类中获取类定义或值？【英文标题】：IsthereawaytogettheclassdefinitionoravaluefromacssclassusingJQuery?【发布时间】：2020-04-1623:44:52【问题描述】：给定以下CSS：.myClass1width:50px;.myClass2width:150px;还有以下HTML：...<d... 查看详情

从 Youtube 视频中获取视频元数据

...omaYoutubevideo【发布时间】：2015-08-2309:31:06【问题描述】：有没有办法从youtube视频中获取元数据，因为它在iframe中并嵌入。另外-所有youtube视频的比例和分辨率都相同吗？【问题讨论】：【参考方案1】：您可以通过youtube-dl（开源... 查看详情

如何使用 video.js 在视频中添加注释

】如何使用video.js在视频中添加注释【英文标题】：Howtoaddannotationsinvideousingvideo.js【发布时间】：2014-03-2806:57:43【问题描述】：是否可以使用Video.js在我的视频中添加注释？下面是我的作品<linkhref="http://vjs.zencdn.net/4.4/video-js.css"... 查看详情

有没有办法在 selenium webdriver 中获取 <embed> 标签资源

】有没有办法在seleniumwebdriver中获取<embed>标签资源【英文标题】：Isthereanywaytoget<embed>tagresourcesinseleniumwebdriver【发布时间】：2017-06-1005:11:46【问题描述】：我正在尝试将pdf嵌入到html文档中。https://pdfobject.com/static.html这是... 查看详情

有没有办法从 JavaScript 中的字符串中删除 html 标签？ [复制]

】有没有办法从JavaScript中的字符串中删除html标签？[复制]【英文标题】：IsthereawaytoremovehtmltagsfromastringinJavaScript?[duplicate]【发布时间】：2018-12-1403:53:57【问题描述】：我正在使用primeng的富文本编辑器组件。该编辑器将我输入的... 查看详情

有没有办法从字符串中获取数字并使用 XSLT 计算相同的总和？

】有没有办法从字符串中获取数字并使用XSLT计算相同的总和？【英文标题】：IsthereanywaytogetnumberoutofStringandCalculateSumofthesameusingXSLT?【发布时间】：2021-10-2315:17:15【问题描述】：字符串，例如-10AL@6\'X32\'ROOFTOP5AL@6\'X32\'ROOFTOP4AL@6\'X32... 查看详情

如何从 facebook 获取其他人或页面视频缩略图？

...ilfromfacebook?【发布时间】：2021-09-1511:28:09【问题描述】：有没有办法从其他人的视频或帖子中获取视频缩略图？我尝试在google和***中进行搜索，但我发现的只是获取您自己的视频缩略图，使用https://graph.facebook.com/v11.0/44305 查看详情