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

基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Controlbar的上面,并且包含当前的时间,阿里云的媒体处理服务提供接口可以生成缩略图的功能, 先看一下基本的效果: 缩略图的格式 WebVTT介绍 缩略图采用了webvtt的文件格式去表示时间和显示图片的对应关系,WebVTT不仅可读性好,而且解析也比较容易,下面是一个27秒包含3个截图的WebVTT文件内容: WEBVTT 00:00.000 --> 00:09…

基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应的TS文件并不持久化保存,导致当前时间之前的直播视频内容无法回溯:而对于开通了时移功能的HLS直播而言,TS分片地址及相应TS文件会分别在数据库和OSS中持久化保存最长15天,使得回溯从直播开始时间到当前时间之间的视频内容成为可能.详情参见 直播时移, 播放器的表现为: 直播时移在播放器中的表现为可…

基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式介绍 多字幕现在支持HLS的格式,后期会去实现Dash格式的支持. 字幕文件 字幕的内容使用WebVTT的格式,更多的关于WebVTT可以参考WebVTT 格式如下: WEBVTT 00:00:09.960 --> 00:00:12.600 Argentina was among the found…

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

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

基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以导出图片的base64编码,基本就完成了图片截图的功能. 功能实现 Canvas接口介绍 drawImage接口 在画布上绘制图像.画布或视频,也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸,主要参数为: 参数 描述 img 规定要使用的图像.画布或视频. sx 可选.开始剪切的 x 坐标…

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

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

…