基本介绍

网络环境比较复杂、网速不稳定,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高级功能介绍(七):多分辨率的更多相关文章

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

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

  2. 阿里云 Aliplayer高级功能介绍(二):缩略图

    基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Controlbar的上面,并且包含当前的时间,阿里云的媒体处理服务提供 ...

  3. 阿里云 Aliplayer高级功能介绍(四):直播时移

    基本介绍 时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...

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

    基本介绍 如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持 ...

  5. 阿里云Aliplayer高级功能介绍(一):视频截图

    基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...

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

    基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: ...

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

    基本介绍 Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务 ...

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

    基本介绍 经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Alipl ...

  9. 阿里云CDN服务功能介绍

随机推荐

  1. 廖雪峰Java16函数式编程-2Stream-6reduce

    1. 聚合方法 Stream.reduce()是一个Stream的聚合方法:把一个Stream的所有元素聚合成一个结果 例如: Stream.of(1, 2, 3, 4, 5).count(); // ...

  2. 网站统计中的PV-UV-IP的定义与区别

    --------首先来看看ip.uv和pv的定义---------- PV(访问量):即Page View, 即页面浏览量或点击量,用户每次刷新即被计算一次.UV(独立访客):即Unique Visi ...

  3. BZOJ 1089 (SCOI 2003) 严格n元树

    Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...

  4. [BJOI 2018]染色

    题意:求01成立. 并查集维护,记录一个变量判断决策. #include<bits/stdc++.h> using namespace std; #define int long long ...

  5. JAVA基础_泛型

    什么是泛型 泛型是提供给javac编译器使用的,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型说明的集合时会去除掉"类型"信息,是程序的运行效率不受影响 ...

  6. 第三周课堂笔记1thand2thand3th

    元组   元组是以逗号隔开的 元组有索引有切片,元组是小括号和中括号的集合, 元组中的东西不可修改(小括号内的东西不可被修改,但是小括号里的列表和字典可以被修改)   2. 由内存地址来分 可变数据类 ...

  7. Linux真好玩阿,不过我家电脑不行,运行不够流畅

    不过呢....能编程就行了....   哎,总说不用QT不用QT,最后还是没办法,用QT了   连个界面都看不到的话,感觉太差了....   我还不会用QT呢....好好学习....争取像MFC那样习 ...

  8. Spring MVC上传、下载 文件

    1,上传文件 public static String upload(MultipartFile file, SysUserBean sysUserBean, HttpServletRequest r ...

  9. mybatis-spring多数据源配置

    mybatis-spring多数据源配置 1.注意事项:在MapperScannerConfigurer里配置的时候,每个数据源的mapper接口应放到不同的包中,下面的例子中用粗体标明,另外,对于m ...

  10. MVC中DropDownListFor的使用注意事项

    1.在MVC的View页面中使用DropDownListFor时当DropDownListFor是列表是通过后台ViewBag传过来时,当ViewBag中的Key与DropDownListFor一致时 ...