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

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

基本介绍

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

24a49d77e234a4634672c19b5746709563a875fc

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打完包以后的基本结构:

67483b0b891e616278359fd38ecdc44c59073ce8

打完包以后字幕文件将做为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, 比如:

03796ff645de8d4a4622b7bde32edcd31a6af0f7

Aliplayer的字幕服务

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

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

多音轨

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

f38c66db16d9ed90ff0998c69b07f894240e97ae

使用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("播放器创建成功");
  });

目录
相关文章
|
6月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
|
5月前
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
41 0
|
JavaScript API
uniapp实现录音功能和播放功能
uniapp实现录音功能和播放功能
|
12月前
|
开发工具
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
64 1
|
6月前
uniapp制作录音播放功能
uniapp制作录音播放功能
212 0
|
6月前
|
存储
uniapp录音功能和音频播放功能制作
uniapp录音功能和音频播放功能制作
387 0
阿里云 Aliplayer高级功能介绍
Aliplayer除了一些基本功能,还有一些高级的功能,可能需要云端配合才可以使用,或者播放器本身需要做更多的配置,希望写一些文件介绍如何使用和介绍一下简单的实现原来,让用户了解这些功能,更好的使用播放器,文章不仅介绍内置的功能,还会包含通过插件写的其他功能。
37935 0
|
缓存 JavaScript 前端开发
|
安全 JavaScript 前端开发
如何让在线视频以自定义速度播放
现在看视频不来个两倍速(或者更快)都觉得在浪费生命。 特别是在看视频教程的时候,文字我们可以做到一目十行,但是视频呢,如果有字幕,我们甚至不用听清,用3倍速或者4倍速完全没有问题,尤其在看别人在线写代码的时候,速度快了,就觉得特别顺滑。
509 0
如何让在线视频以自定义速度播放
|
Android开发 iOS开发
阿里云移动端播放器高级功能---截图和音频波形
如果用户对视频播放中的某一帧画面特别感兴趣,可以使用截图功能将这一帧视频保存起来。另外有一种场景想知道是否有声音,或者想感知声音的大小震动频率等,可以通过显示一个声音的波形来形象的表示。如下图所示:
8380 0