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

目录
相关文章
|
5月前
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
技术经验分享:AVFoundation播放视频时显示字幕,切换音轨
46 0
|
JavaScript API
uniapp实现录音功能和播放功能
uniapp实现录音功能和播放功能
|
开发工具
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
Queen智能美化特效SDK需要高级美颜、常见美型、美体这样是属于按版本买,还是按客户端计费?
65 1
|
6月前
|
存储
uniapp录音功能和音频播放功能制作
uniapp录音功能和音频播放功能制作
398 0
阿里云 Aliplayer高级功能介绍
Aliplayer除了一些基本功能,还有一些高级的功能,可能需要云端配合才可以使用,或者播放器本身需要做更多的配置,希望写一些文件介绍如何使用和介绍一下简单的实现原来,让用户了解这些功能,更好的使用播放器,文章不仅介绍内置的功能,还会包含通过插件写的其他功能。
37948 0
阿里云 Aliplayer高级功能介绍(六):进度条标记
基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: 接口和属性介绍 播放器提供了progressMarkers属性,是一个数组类型,每一条记录包含o.
13558 0
|
Web App开发 存储 编解码
视频点播开发者实战:视频水印动态替换
在某些特定场景,不同的视频需要压制不同的水印信息,例如:短视频需要压制不同用户的昵称等,以表示不同视频版权属于不同的上传用户。
3603 0
|
数据安全/隐私保护
阿里云移动端播放器高级功能---视频下载
基本介绍 优酷、爱奇艺、腾讯等主流的视频类App都有视频离线下载的功能,主要目的是在wifi下将视频离线在本地,然后在无网或者4G的情况下去观看离线视频。那么阿里云播放器也提供了视频下载的功能。这个功能主要针对的是点播视频,也就是vid播放的视频的下载。
6227 0
|
Android开发 iOS开发
阿里云移动端播放器高级功能---截图和音频波形
如果用户对视频播放中的某一帧画面特别感兴趣,可以使用截图功能将这一帧视频保存起来。另外有一种场景想知道是否有声音,或者想感知声音的大小震动频率等,可以通过显示一个声音的波形来形象的表示。如下图所示:
8388 0
|
Web App开发 UED iOS开发
阿里云 Aliplayer高级功能介绍(九):自动播放体验
经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Aliplayer也专们做过优化,提供一些方式让客户能更好的处理这种情况。
9235 0