videoleap怎么自动识别字幕（videoleap自动添加字幕）

互联网给我们带来方便的同时，也时常让我们感到困惑。随便搜搜就出一大堆结果，然而总是有大量的重复和错误。本号发出的内容，都是自己实测过的，有问题请留言。

先看下效果(PC chrome)

video 中加 track 标签

只支持 vtt 格式

track 的兼容性

在已生成的 video 中加 track

如果不能在 video 生成时插入 track 标题，就用 JS 插入 track。比如用了人家的播放器，又没有添加字幕 API

let track = document.createElement("track");
track.src = "xxx.vtt";
track.srclang = "zh";
track.setAttribute("label", "中文字幕");
track.setAttribute("kind", "captions");
track.setAttribute("default", "");
videoEle.appendChild(track);

如果 vtt 文件在 CDN 上

videoEle.setAttribute("crossdomain", "true");

并且 vtt 请求要支持 CORS

如果 CDN 并不能支持 CORS

搞个代理接口拿到 vtt 文件内容，如:

srt 格式:
00:00:03,334 --> 00:00:06,971
From his new album, "Yo Hago Lo Que Me Da La Gana,"

vtt 格式:
00:00:03.334 --> 00:00:06.971
From his new album, "Yo Hago Lo Que Me Da La Gana,"

转换成如下格式(中间态，可以忽略):
trackList = [
  {
    begin : 3.334,
    end : 6.971,
    text : 'From his new album, "Yo Hago Lo Que Me Da La Gana,"',
  },
];
let track = video.addTextTrack("captions", "English", "en");
track.mode = "showing";  // showing/hidden/disabled 因为可以添加多个字幕，一般默认显示一个就可以了
trackList.forEach(item => {
  track.addCue(new VTTCue(item.begin, item.end, item.text));
});

播放器切换视频时，清空字幕

video 有 addTextTrack 方法，但并没有对应的 removeTextTrack ！
未解决，目前只能重置 video，显然不是好办法。
如果您有更好的办法，请留言，谢谢！
赞 (0)

相关推荐

  • 视频自动加字幕（视频怎样添加字幕）

    视频自动加字幕（视频怎样添加字幕）

    视频怎么加字幕?我们平时在制作短视频时,如果视频内容中有对话,为了方便别人有更好的观感我们最好加上字幕.因为拍视频时身边可能有杂音,还有可能自己说话发音不够清晰.还有一些网友可能在公共场合静音看视频, ...

  • 手机视频字幕自动生成软件（识别声音自动生成字幕的软件）

    手机视频字幕自动生成软件（识别声音自动生成字幕的软件）

    很多人在剪辑视频,特别是很长的视频的时候对字幕会很烦,尤其是没有自动识别字幕功能的时候还要自己一个一个字的敲上去,对我们来说是很麻烦的,根据题主的要求,下面的几个软件是稍微很好的字幕生成软件,不仅可以 ...

  • 如何给视频添加字幕（如何快速给视频添加字幕）

    如何给视频添加字幕（如何快速给视频添加字幕）

    一个高质量的视频基本上都会有字幕,字幕可以使观众更快速地了解视频内容,但是添加字幕是一个非常麻烦.耗时的工作,现在在Premiere Pro新版本中,添加字幕可以很方便.高效的完成.新版中将原来的字幕 ...

  • 短视频如何添加字幕（短视频加字幕怎么制作）

    短视频如何添加字幕（短视频加字幕怎么制作）

    随着短视频的火爆,越来越多的小伙伴进入短视频行业.如何给短视频添加字幕也是创作者要考虑的问题.手动给视频添加字幕不仅费时费时,而且容易造成字幕出现偏差问题.今天给大家分享一个超简单的短视频添加字幕方式 ...

  • 录制的视频如何添加字幕（可以给视频加字幕的软件）

    录制的视频如何添加字幕（可以给视频加字幕的软件）

    现在市面上有很多,字幕制作的网站和软件,但到最后都要按时长收费!如果只是练练手的话,看看下面给你的介绍!制作同期声字幕:第一步:音频样式视频自有音源麦克风录制的音源其他音频文件第二步:音频转文字这里用 ...

  • 合并后单元格怎么自动添加序号（如何给合并单元格自动填充序号）

    合并后单元格怎么自动添加序号（如何给合并单元格自动填充序号）

    关注转发收藏会让小编更有动力输出高价值的内容在EXCEL的应用中合并单元格是我们常常会用到的那么合并单元格与连续序号并存的情况你是否也多见呢其实这也是EXCEL中一个经久不衰的问题因为经常有人会问到小 ...

  • Excel单元格自动添加框线（表格怎么添加边框）

    Excel单元格自动添加框线（表格怎么添加边框）

    Hello,大家好,在日常的工作中,我们为单元格添加边框的时候,一般是放在完成表格设计的最后一步,但是很多时候总是会忘记添加边框,今天就跟大家分享2种自动添加边框的方法,最快的方法仅需一个快捷键即可搞 ...

  • 剪辑怎么去掉原字幕（剪视频怎样把原有的字幕去掉）

    剪辑怎么去掉原字幕（剪视频怎样把原有的字幕去掉）

    在我们进行视频剪辑的时候,可能会因为某些因素而需要重新添加字幕,那么这个时候就需要将原视频的字幕给去掉,那么原视频字幕该如何删除呢?接下来成都东涞职业学校就教你如何删除原视频字幕!第一:直接把字幕拉到 ...

  • 视频字幕实时翻译（怎么给视频自动翻译字幕）

    视频字幕实时翻译（怎么给视频自动翻译字幕）

    影视剧字幕翻译也是翻译领域里非常重要的一个分类.今天和大家分享一篇介绍字幕翻译流程和方法的文章,一起来了解下.1. 字幕翻译流程字幕翻译流程一般为:任务分工→视频源下载→听录原音字幕或下载源语言字幕→ ...