阿里云 Aliplayer高级功能介绍(七):多分辨率
基本介绍
网络环境比较复杂、网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下:

Source模式
source的方式指定多个清晰度的地址,这个模式在直播场景下使用的比较多,阿里云直播服务可以提供多码率的播放流地址,详细请参考:视频直播转码。Aliplayer提供了下面清晰度的对应关系:
| Code | Text |
|---|---|
| OD | 原画 |
| FD | 流畅 |
| LD | 标清 |
| SD | 高清 |
| HD | 超清 |
| 2K | 2K |
| 4K | 4K |
source如何支持多清晰度,参考下面的代码:
var player = new Aliplayer({
id: "player-con",
isLive:true,
source:'{"HD":"https://livecdn.com/appname/testhd.flv",
"SD":"https://livecdn.com/appname/testsd.flv",
"FD":"https://livecdn.com/appname/testfd.flv",
"LD":"https://livecdn.com/appname/testld.flv"
}',
width: "100%",
height: "500px",
autoplay: true
}, function (player) {
console.log("播放器创建成功");
});
videoId模式
播放点播服务的视频时,采用videoId的模式, Aliplayer会获取用户在点播服务转码生成的多分辨率的视频地址,生成多清晰度选择列表,详细参考点播转码。

如果用户转码生成多种视频格式文件,Aliplayer将会按照mp4->m3u8->flv的顺序优先选择播放,如果有加密视频和普通视频一起,点播服务将只会返回加密视频的播放地址。Aliplayer提供了其他一些属性可以做精确的获取点播视频的播放地址:
| 属性名称 | 类型 | 说明 |
|---|---|---|
| format | String | 指定播放地址格式可选值为mp4、m3u8、flv、mp3,默认为空 |
| mediaType | String | 指定返回音频还是视频,可选值为video和audio,默认为video,audio主要是针对只包含音频的视频格式 |
| qualitySort | String | 指定排序方式,desc表示按倒序排序(即:从大到小排序),asc表示按正序排序(即:从小到大排序)默认值:‘asc’ |
| definition | String | 显示视频清晰度,多个用逗号分隔,比如:’FD,LD’,此值是vid对应流清晰度的一个子集,取值范围:FD(流畅)LD(标清)SD(高清)HD(超清)OD(原画)2K(2K)4K(4K) |
| defaultDefinition | String | 默认播放视频清晰度,取值范围:FD(流畅)LD(标清)SD(高清)HD(超清)OD(原画)2K(2K)4K(4K),默认是上次播放时选择的清晰度 |
播放器的使用代码为:
var player = new Aliplayer({
id: "player-con",
width: "100%",
height: "500px",
autoplay: true,
language: "en-us",
vid : '1e067a2831b641db90d570b6480fbc40',
playauth:'ddddfdfdf'
format:'m3u8',
mediaType:'video',
qualitySort:'desc',
definition:'FD,LD',
defaultDefinition:'LD'
}, function (player) {
console.log("播放器创建成功");
});
HLS的多码率
HLS HTTP Live Streaming是Apple提出的基于http的流媒体传输协议,支持不同带宽的多码率地址,基本格式如下:
#EXTM3U
#EXT-X-VERSION:4
#EXT-X-STREAM-INF:BANDWIDTH=454521,AVERAGE-BANDWIDTH=432061,CODECS="avc1.42c01e,mp4a.40.5",RESOLUTION=340x192,FRAME-RATE=25.000
GEPH-ONTHERECS02E012C-_E17101101_master_stream_x3f6b2fee5c3d4f388ed8edee586bd6f8_340.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=691401,AVERAGE-BANDWIDTH=644868,CODECS="avc1.42c01e,mp4a.40.5",RESOLUTION=384x216,FRAME-RATE=25.000
GEPH-ONTHERECS02E012C-_E17101101_master_stream_x3f6b2fee5c3d4f388ed8edee586bd6f8_384.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=926476,AVERAGE-BANDWIDTH=850169,CODECS="avc1.42c01f,mp4a.40.5",RESOLUTION=512x288,FRAME-RATE=25.000
#EXT-X-STREAM-INF:BANDWIDTH=7011961,AVERAGE-BANDWIDTH=6374698,CODECS="avc1.640028,mp4a.40.5",RESOLUTION=1920x1080,FRAME-RATE=25.000
GEPH-ONTHERECS02E012C-_E17101101_master_stream_x3f6b2fee5c3d4f388ed8edee586bd6f8_1920.m3u8
EXT-X-STREAM-INF:BANDWIDTH里的指定带宽,下面为此带宽使用对应分辨率的视频地址,Aliplayer解析上面的master m3u8内容,展示清晰度列表,并且会根据网络情况选择合适的清晰度播放:

阿里云的媒体处理服务支持多分变率的打包, 详细参考:如何进行HLS打包
原文链接
更多技术干货 请关注阿里云云栖社区微信号 :yunqiinsight
阿里云 Aliplayer高级功能介绍(七):多分辨率的更多相关文章
- 阿里云 Aliplayer高级功能介绍(三):多字幕
基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...
- 阿里云 Aliplayer高级功能介绍(二):缩略图
基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Controlbar的上面,并且包含当前的时间,阿里云的媒体处理服务提供 ...
- 阿里云 Aliplayer高级功能介绍(四):直播时移
基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...
- 阿里云 Aliplayer高级功能介绍(八):安全播放
基本介绍 如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持 ...
- 阿里云Aliplayer高级功能介绍(一):视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
- 阿里云 Aliplayer高级功能介绍(六):进度条标记
基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: ...
- 阿里云 Aliplayer高级功能介绍(五):多语言
基本介绍 Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务 ...
- 阿里云 Aliplayer高级功能介绍(九):自动播放体验
基本介绍 经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Alipl ...
- 阿里云CDN服务功能介绍
随机推荐
- 跨域问题The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by t
withCredentials 属性 上面说到,CORS请求默认不发送Cookie和HTTP认证信息.如果要把Cookie发到服务器,一方面要服务器同意,指定Access-Control-Allow- ...
- SpringBoot_03_SpringBoot对其他技术的整合
1.SpringBoot整合Mybatis 1.2 添加Mybatis的起步依赖 <!--mybatis起步依赖--> <dependency> <groupId> ...
- js 当前时间和对比时间的比较
<!DOCTYPE><html> <head> <meta charset="utf-8" /> <title>功能:当 ...
- day22_5-xml模块
# 参考资料:# python模块(转自Yuan先生) - 狂奔__蜗牛 - 博客园# https://www.cnblogs.com/guojintao/articles/9070485.html ...
- 19.SimLogin_case05
# 使用自造的cookies登录马蜂窝 import requests from lxml import etree str = 'mfw_uuid=5bcfcc20-b235-fbbe-c1d6-a ...
- <前端>简单实现开心网注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Neo4j全文检索
全文检索基本概念 搜索 搜索这个行为是用户与搜索引擎的一次交互过程,用户需要找一些数据,他提供给搜索引擎一些约束条件.搜索引擎通过约束条件抽取一些结果给用户 搜索引擎 搜索引擎存在的目的是存储,查找和 ...
- CSDN的验证码,为什么要这样呢
总是有连着的部分
- PHP网络请求优化
目录 1. 设置超时时间 2. 将串行请求并行化 1. 设置超时时间 连接超时:200ms 读超时: 800ms 写超时: 500ms 2. 将串行请求并行化 使用curl_multi_*() 使用s ...
- data hazard in CPU pipeline
1, background info 5 stages in CPU pipeline: IF, ID, EX, MM, WB IF – Instruction Fetch ID – Instruct ...