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)