Aliplayer中自定义添加字幕的实现

参考了阿里云的博客:https://my.oschina.net/u/1464083/blog/2999343
VTTCue官方文档:https://developer.mozilla.org/en-US/docs/Web/API/VTTCue

字幕文件的格式为vtt

创建播放器

var player = new Aliplayer({"id": "player-con","source": "https://example.com/1.mp4","width": "100%","height": "500px","autoplay": true,"isLive": false,"rePlay": false,"playsinline": true,"preload": true,"controlBarVisibility": "hover","useH5Prism": true}, function (player) {console.log("The player is created");});

获取播放器对象

let _video = document.querySelector('video');

添加一个字幕项

_video.addTextTrack('subtitles', '中文', '中文');

获取字幕列表

let tracks = _video.textTracks;//获取全部的轨迹

根据字幕文件地址,解析字幕,并添加进`track`

首先先看下字幕文件的格式和内容

WEBVTT
Kind: captions
Language: zh-Hans00:00:00.030 --> 00:00:05.190
您是否曾经有过一个很棒的设计想法，您是否想过00:00:05.190 --> 00:00:09.179
这些天才做到了，他们做了一些事，应该到处存在

可以看到,分为开始时间/结束时间,还有文字

再来看一下播放器需要的对象类型

textTracks方法获取到的对象是TextTrackList
而TextTrackList的item类型为TextTrack
TextTrack对象的用法需要调用addCue()方法
查阅方法定义:

addCue(cue: TextTrackCue): void;

这个cue就是实际的字幕

我们接着看下`cue`的定义.

/** TextTrackCues represent a string of text that will be displayed for some duration of time on a TextTrack. This includes the start and end times that the cue will be displayed. A TextTrackCue cannot be used directly, instead one of the derived types (e.g. VTTCue) must be used. */
interface TextTrackCue extends EventTarget {endTime: number;id: string;onenter: ((this: TextTrackCue, ev: Event) => any) | null;onexit: ((this: TextTrackCue, ev: Event) => any) | null;pauseOnExit: boolean;startTime: number;text: string;readonly track: TextTrack;getCueAsHTML(): DocumentFragment;...
}
declare var TextTrackCue: {prototype: TextTrackCue;new(startTime: number, endTime: number, text: string): TextTrackCue;
};

它有构造方法.但根据注释A TextTrackCue cannot be used directly说明,这个对象无法直接使用,要用的话得用它的派生对象(instead one of the derived types (e.g. VTTCue) must be used)
这里不注意或者直接跟着阿里云文档走的话,用TextTrackCue会报错Uncaught TypeError: Illegal constructor.

所以我们需要用`VTTCue`

定义:

declare var VTTCue: {prototype: VTTCue;new(startTime: number, endTime: number, text: string): VTTCue;
};

可以看到构造方法需要3个参数,且时间字段的类型为number
并且官方文档的示例如下:

const cueCn = new VTTCue(0, 2.500, '字幕会在0至2.5秒间显示');
track.addCue(cueCn);

可以得知这里的时间单位是秒.

解析和插入字幕

那接下来开始解析字幕文件,转成cue对象,再添加进字幕对象中:

async function getVtt() {await fetch('http://example.com/subtitle/123.vtt', {method: 'GET'}).then((res) => res.text()).then(res => {const arr = res.split("\n");for (let i = 0; i < arr.length; i++) {const line = arr[i];if (line.indexOf('-->') > -1) {const cue = line.split('-->');const startTime = cue[0].trim();const endTime = cue[1].trim();const text = arr[i + 1];const textTrackCue = new VTTCue(getMil(startTime), getMil(endTime), text);textTrackCue.id = i + 1;tracks[0].addCue(textTrackCue);i++;}}});}

其中用到了时间格式处理方法:

时间格式示例:00:00:17.369 --> 00:00:21.529

function getMil(time) {let result = 0;const time1 = time.split('.')[0].split(':');time1.map((item, index) => {let num = Number(item);for (let i = 0; i < (2 - index); i++) {num = num * 60}result += num});result += Number('0.' + time.split('.')[1]);return result
}

Aliplayer中自定义添加字幕的实现相关推荐

R语言ggplot2可视化、在可视化区域中自定义添加多个大小不同矩形阴影区域、自定义配置大小不同矩形阴影区域的颜色（Adding multiple shadows/rectangles）
R语言ggplot2可视化.在可视化区域中自定义添加多个大小不同矩形阴影区域.自定义配置大小不同矩形阴影区域的颜色(Adding multiple shadows/rectangles) 目录
Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限
场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
tcpdump/editcap等工具保存文件时名称中自定义添加日期/时间
tcpdump: tcpdump -w $(date +%Y-%m-%d_%H:%M:%S).pcap editcap: editcap test_pcap.pcap test_pcap_$(date ...
怎么给视频添加字幕？看完这篇文章你就清楚了
视频字幕是指在视频中添加的文字信息,用于说明.解释或强调视频内容.字幕在视频制作中非常重要,可以帮助观众更好地理解和记忆视频内容,同时也能提高视听体验.以下给小伙伴们普及视频字幕的相关内容,感兴趣的小 ...
会声会影2023如何添加字幕会声会影添加字幕后不显示
会声会影2023旗舰版是一款很实用的视频编辑软件,适合用于视频的后期制作.在后期制作中,添加字幕是很重要的环节.而会声会影的字幕编辑功能非常强大,可直接编辑.导入以及批量添加.下面我们一起来了解下会声 ...
中英文视频识别字幕并对其添加字幕--自用可白嫖--中/英/中英双语字幕
中英文视频识别字幕并对其添加字幕–自用可白嫖–中/英/中英双语字幕文章目录中英文视频识别字幕并对其添加字幕--自用可白嫖--中/英/中英双语字幕 01 平台介绍 1.1 网易见外工作台 1.2 A ...
Mybatis-Plus 使用自定义注入器后，查询条件中不再添加逻辑删除字段限定条件
例如项目中加入如下注入器代码后,查询条件中不再添加逻辑删除字段限定条件 /*** 自定义Sql注入** @author nieqiurong 2018/8/11 20:23.*/ @Component ...
VBA实现为Excel中自定义名称的单元格添加批注
一.本地office中通过创建宏实现此需求 1.打开一个Excel文件,在需要插入批注的单元格右击-定义名称(myTable1).点击菜单栏-视图-宏-查看宏-输入宏名-创建宏 2.进入VBA编辑 ...
IDEA中快速添加自己自定义的方法方法，想要什么快捷方法都行
IDEA中快速添加自己自定义的方法方法,想要什么快捷方法都行作为一个从MyEclipse转IDEA的程序员,原来写main就能补全main方法,写syso就能补全System.out.println ...

Aliplayer中自定义添加字幕的实现

创建播放器

获取播放器对象

添加一个字幕项

获取字幕列表

根据字幕文件地址,解析字幕,并添加进`track`

首先先看下字幕文件的格式和内容

再来看一下播放器需要的对象类型

我们接着看下`cue`的定义.

所以我们需要用`VTTCue`

解析和插入字幕

Aliplayer中自定义添加字幕的实现相关推荐

最新文章

热门文章

Aliplayer中自定义添加字幕的实现

创建播放器

获取播放器对象

添加一个字幕项

获取字幕列表

根据字幕文件地址,解析字幕,并添加进track

首先先看下字幕文件的格式和内容

再来看一下播放器需要的对象类型

我们接着看下cue的定义.

所以我们需要用VTTCue

解析和插入字幕

Aliplayer中自定义添加字幕的实现相关推荐

最新文章

热门文章

根据字幕文件地址,解析字幕,并添加进`track`

我们接着看下`cue`的定义.

所以我们需要用`VTTCue`