阿里云 Aliplayer高级功能介绍(三):多字幕

基本介绍

国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果:

WebVTT格式介绍

多字幕现在支持HLS的格式,后期会去实现Dash格式的支持。

字幕文件

字幕的内容使用WebVTT的格式,更多的关于WebVTT可以参考WebVTT 格式如下:

WEBVTT

00:00:09.960 --> 00:00:12.600
Argentina was among the
founding members of

00:00:12.640 --> 00:00:14.440
the International Olympic
Committee,

00:00:14.480 --> 00:00:16.640
and sent a team to Paris
in 1900,
  • 第一行必需是WEBVTT,表明这是个WebVTT文件文件。
  • 接着是一空行,后面就是每一项的一个cue,包含时间范围和要显示的字幕,时间格式是HH:MM:SS.sss,时:分:秒.毫秒, 开始时间 --> 结束时间,-->的两边各有一个空格,这两个时间必需写在同一行,并且时间都是相对于视频开始的时间间隔。
  • 时间之后是字幕文本,时间和字幕文本之间不能有空行,字幕文本可以是一行或多行,字幕文本中不能有空行。

字幕样式

字幕除了本身字幕里面可以定义字幕的显示样式, 如果每个字幕的样式都是一样的, 那可以通过H5 Video的CSS样式统一定义,浏览器提供了::cue伪元素, 通过匹配::cue伪元素设置字幕的样式。

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

更多的样式属性可以参考:: cue CSS伪元素

H5 Video如何显示字幕

H5 Video采用track组件显示字幕, 主要包含下面属性:

名称 说明
default 定义了该track应该启用
kind 定义了 text track 应该如何使用,可选值包含subtitles、captions、descriptions、chapters、metadata,默认为subtitles
label 显示标题,用户可读的
src track的地址
srclang track文本数据的语言,它必须是合法的 BCP 47 语言标签

H5 Video显示字幕的HTML代码,是很简单的:

<video controls autoplay src="video.mp4">
 <track default src="track.vtt" lable="中文">
</video>

Aliplayer实现字幕

Aliplayer和阿里云视频云的点播服务或媒体处理服务结合起来更方便的实现字幕,如果用户使用了阿里云服务,那么集成播放器后不用做什么事情,只要使用VideoId的播放方式播放视频,没有额外的事情要做。

HLS字幕文件的结构

通过媒体处理服务的Open API可以打包用户的字幕文件到HLS视频里面, 具体可以参考如何进行HLS的打包 HLS打完包以后的基本结构:

打完包以后字幕文件将做为HLS Master List里面的一部分,type的值为“SUBTITLES”, 具体看:

#EXTM3U
#EXT-X-VERSION:4
#EXT-X-MEDIA:TYPE=SUBTITLES,NAME="ENGLISH",LANGUAGE="eng",URI="english.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,NAME="日本語",LANGUAGE="jpn",URI="jpn.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,NAME="中文",LANGUAGE="zho",URI="zho.m3u8"

上面的每一种语言的字幕的URI对应的是一个m3u8文件,这个m3u8文件包含的内容是WebVTT的list,比如english.m3u8包含的内容:

#EXTM3U
#EXT-X-VERSION:4
#EXT-X-TARGETDURATION:300
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:300.000,
00001.vtt
#EXTINF:37.840,
00002.vtt
#EXT-X-ENDLIST

是不是和我们的HLS的切片列表很像的,基本一样, EXTINF下面的vtt地址对应的vtt文件里包含的是具体的字幕内容, 比如00001.vtt包含的内容:

WEBVTT  

00:00:09.960 --> 00:00:12.600
Argentina was among the
founding members of

00:00:12.640 --> 00:00:14.440
the International Olympic
Committee,

00:00:14.480 --> 00:00:16.640
and sent a team to Paris
in 1900,

Aliplayer创建Track

之前说H5 Video有Track组件可以用于播放字幕, 因此在从HLS里解析出WebVTT列表以后,通过addTextTrack方法添加到音频元素的文本轨道列表中, 添加完以后,可以通过音频元素的textTracks属性,得到全部的文本轨道。

video.addTextTrack(kind,label,language);
let tracks = video.textTracks;//获取全部的轨迹

大家可能也发现了,这里添加的TextTrack并没有属性可以指定WebVTT的地址,不像HTML的Track组件,地址直接赋值给src属性就OK了, 因此我们还需要解析WebVTT的内容,然后转为cue对象,添加到当前的语言的TextTrack里面。

  const textTrackCue = new TextTrackCue(cue.startTime, cue.endTime, cue.text);
  textTrackCue.id = cue.id;
  currentTrack.addCue(textTrackCue);

现在我们把轨道和字幕内容到添加到媒体组件了, Aliplayer在播放视频的时候会获取TextTracks里的值建立可视化的UI, 比如:

Aliplayer的字幕服务

Aliplayer除了提供默认UI操作外, 还提供了CCService满足用户的一些自定义需求,比如需要根据浏览器的语言默认播放那个语言等等,通过player._ccService属性访问字幕服务,字幕服务提供了如下的API:

名称 参数 说明
switch language 切换字幕
open   关闭字幕
close   关闭字幕
getCurrentSubtitle   获取当前字幕的language的值

多音轨

除了支持多字幕,Aliplayer也支持多音轨,下面是效果:

使用Aliplayer

使用Aliplayer播放字幕,可以直接通过source属性指定hls文件地址播放,也可以通过vid+playauth的方式播放点播服务的视频:

var player = new Aliplayer({
    id: "player-con",
    source: "https://vod.olympicchannel.com/NBCR_Production_-_OCS/231/1016/GEPH-ONTHERECS02E012C-_E17101101_master.m3u8",
    width: "100%",
    height: "500px",
    autoplay: true,
    isLive: false
  }, function (player) {
    console.log("播放器创建成功");
  });

原文地址:https://www.cnblogs.com/zhaowei121/p/10244905.html

时间: 2024-10-17 11:27:51

阿里云 Aliplayer高级功能介绍(三):多字幕的相关文章

阿里云 Aliplayer高级功能介绍(八):安全播放

基本介绍如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持的,但是也有一些限制. 访问限制访问限制主要是阿里云视频云提供的安全访问能力, 只需要云端配置, 播放器无需做额外的事情,并且拒绝访问的原因会通过"X-Tengine-Error"Response Header返回,Http请求的错误的Code为403. 开启Referer防盗链后,如果Re

阿里云 Aliplayer高级功能介绍(七):多分辨率

基本介绍网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: 66ccc596257a5db1d0f106b57454e14da6a8f61e Source模式source的方式指定多个清晰度的地址,这个模式在直播场景下使用的比较多,阿里云直播服务可以提供多码率的播放流地址,详细请参考:视频直播转码.Aliplayer提供了下面清晰度的对应关系: Code TextOD 原画FD 流畅LD 标清SD 高清HD 超清

阿里云 Aliplayer高级功能介绍(六):进度条标记

基本介绍Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: 接口和属性介绍播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明: 名称 类型 说明offset Number 打点的视频偏移时间,单位:秒text String 打

阿里云 Aliplayer高级功能介绍(九):自动播放体验

基本介绍 经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况. 现象描述 有声音视频无法自动播放这个在移动端上一直都是这个限制,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,Chrome也在2018年4月份发布的66版本也正式关掉了声音自动播放,也就是说通过H5

阿里云 Aliplayer高级功能介绍(五):多语言

基本介绍Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务的多地域,可以支持VideoId的方式播放东南亚和欧洲的视频资源,英文版本播放器: 语言设置属性Aliplayer提供language属性用于指定语言,此属性的优先级高于浏览器的语言设置,默认值为空,代码: var player = new Aliplayer({id: "player-con&quo

Virtualbox 多重加载 高级功能介绍

1. 简介 对于虚拟机,相信对大家来说都不陌生,尤其对一个IT行业的人来讲.让你在现有的操作系统上不需要从新装系统和购买新机器就可以使用其他类型的操作系统.现在主流的虚拟就有VMWare和Virtualbox,virtualbox体系小,也比较稳定,还有一些独到的高级功能比较受用户的青睐. 对于虚拟机中的操作系统,我们大多时候都是用来做实验或者其他用途,但总结起来一句通俗的话,那就是用来折腾的.对于经常使用虚拟机的人来说,可能经常需要将虚拟机中的系统还原到之前的状态,搞不好还需要重新安装.有人会

.top域名注册总量TOP15:阿里云表现突出 跃居第三

IDC评述网(idcps.com)01月22日报道:根据ntldstats.com发布的最新数据显示,截止至1月21日17:00,在.top域名注册市场中,西部数码与中国数据总量纷纷破万,分别达到11,885个.11,429个,涨幅明显,而它们的市场份额却并未因此上涨,反而大幅度下滑.与此同时,阿里云.易名中国跻身15强,分列3.4名.接下来,请看详细的数据分析. (图)国内外域名服务商.top域名注册总量排行榜TOP15 通过观察上图可知,截止至1月21日17:00,在国内外域名服务商.top

阿里云部署web项目(三)——发布项目,运行tomcat,数据库远程连接设置

阿里云存放war包位置与本地不同,war包位置:data/wwwroot/default tomcat启动 1,进入bin目录 cd /root/java/tomcat/bin 2,停止tomcat服务 ./shutdown.sh 3,启动tomcat服务 ./startup.sh 数据库远程连接设置: 1,登录 mysql -u root -p 2, 依次执行如下命令: use mysq; select host from user where user='root'; 可以看到当前主机配置信

C#高级功能(三)Action、Func,Tuple

Action和Func泛型委托实际上就是一个.NET Framework预定义的委托,3.5引入的特性.基本涵盖了所有常用的委托,所以一般不用用户重新声明. Action系列泛型委托,是没有返回参数的委托,最多可以有16参数,也可以没有参数:Func系列的委托是有返回值的委托,最多可以有16个参数: 元组是C# 4.0引入的一个新特性,编写的时候需要基于.NET Framework 4.0或者更高版本.元组使用泛型来简化一个类的定义. 提供用于创造元组对象的静态方法.最多可以提供创建新的 8 元