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

直播时移在播放器中的表现为可以支持当前时间之前的直播内容的回看,当鼠标放到进度条上面时,会出现负数的时间提示,表示回看之前的几分几秒的视频。
Aliplayer的使用
Aliplayer提供了下面的一些属性支持直播时移的配置:
| 名称 | 必选 | 说明 |
|---|---|---|
| isLive | 是 | 值设置为true |
| liveTimeShiftUrl | 否 | 时移信息查询URL怎么生成参考直播时移 |
| liveStartTime | 是 | 直播开始时间 |
| liveOverTime | 是 | 直播结束时间 |
| liveShiftSource | 否 | 直播时移hls地址,只有在source为flv直播流是需要设置 |
基本的代码:
var player = new Aliplayer({
id: "player-con",
source: "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8",
width: "100%",
height: "500px",
autoplay: true,
isLive: true,
liveStartTime:"2018/12/25 16:00:00",
liveOverTime:"2018/12/25 18:00:00",
}, function (player) {
console.log("播放器创建成功");
});
- 开通直播时移
播放器的直播时移功依赖于阿里云直播服务的直播时移,首先需要到阿里云直播服务里开通,详情参见 直播时移。
直播低延迟场景
HLS的延迟比较高,差不多10秒左右, 而flv的延迟基本到3秒左右,因此对于希望低延迟的场景,可以在直播时使用flv地址播放, 切换到时移时使用HLS的地址播放, Aliplayer支持这种模式: source属性指定flv直播地址, liveShiftSource属性指定hls的地址:
{
source:'http://localhost/live/test.flv', //flv的播放地址
liveShiftSource:'http://localhost/live/test.m3u8', //支持直播时移的HLS地址
}
另外需要指定recreatePlayer函数回调,用于切换为flv直播时,重新创建播放器:
var player = "";
var create = function(){
player = new Aliplayer({
recreatePlayer:function(){
create();
},
.....
},
function(player){
console.log('播放器已经创建');
});
}
因此完整的代码为:
var player = "";
var create = function(){
player = new Aliplayer({
id: "player-con",
width: "100%",
height: "500px",
autoplay: true,
//直播时移相关的属性
isLive: true,
liveStartTime:"2018/12/25 16:00:00",
liveOverTime:"2018/12/25 18:00:00",
source:'http://localhost/live/test.flv',
liveShiftSource:'http://localhost/live/test.m3u8',
recreatePlayer:function(){
create();
},
.....
},
function(player){
console.log('播放器已经创建');
});
}
当在回放状态的时候,可以点击Control的"LIVE"图标,可以切换为直播状态:

时移回放地址
当需要区间回放时候,直播服务的播放地址通过添加相关的参数,可以回放指定区间的视频,具体参考:直播时移 但是有一种特殊情况需要说明,如果时移回放的是以前某个区间的视频, 比如当前是17点, 需要回看15点-16点的视频,则可以推荐使用点播模式的地址,结束时间使用"vodend"参数,如果使用直播模式会有下面的问题:
- duration计算不准确
- 播放端的卡顿,暂停等操作,会导致直播服务返回的切片列表不准确
比如直播地址为http://domain/app/stream.m3u8, 当使用直播结束时间是,地址格式为:
http://domain/app/stream.m3u8?lhs_start=1&lhs_start_human_s_8=20171024160220&lhs_end_human_s_8=20171024160420"
使用点播结束时间的地址格式为:
http://domain/app/stream.m3u8?lhs_start=1&lhs_start_human_s_8=20171024160220&lhs_vodend_human_s_8=20171024160420"
主要区别结束参数lhs_end_human_s变为lhs_vodend_human_s, 使用点播格式的时间,表示使用点播模式回看,一次返回指定时间段内的所有切片,包含endlist标签。Aliplayer就使用点播模式观看isLive设置为false.
let player = new Aliplayer({
id: "player-con",
width: "100%",
height: "500px",
autoplay: true,
//不使用直播
isLive: false,
//直播时移的播放地址
source:'http://localhost/live/test.m3u8?lhs_start=1&lhs_start_human_s_8=20171024160220&lhs_vodend_human_s_8=20171024160420"',
},
function(player){
console.log('播放器已经创建');
});
阿里云 Aliplayer高级功能介绍(四):直播时移的更多相关文章
- 阿里云 Aliplayer高级功能介绍(三):多字幕
基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...
- 阿里云 Aliplayer高级功能介绍(二):缩略图
基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Controlbar的上面,并且包含当前的时间,阿里云的媒体处理服务提供 ...
- 阿里云 Aliplayer高级功能介绍(七):多分辨率
基本介绍 网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: Source模式 source的方式指定多个清晰度的地 ...
- 阿里云 Aliplayer高级功能介绍(八):安全播放
基本介绍 如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 更多详细内容查看点播内容安全播放,H5的Aliplayer对于上面的安全机制都是支持 ...
- 阿里云Aliplayer高级功能介绍(一):视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
- 阿里云 Aliplayer高级功能介绍(六):进度条标记
基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: ...
- 阿里云 Aliplayer高级功能介绍(五):多语言
基本介绍 Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务 ...
- 阿里云 Aliplayer高级功能介绍(九):自动播放体验
基本介绍 经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Alipl ...
- 阿里云CDN服务功能介绍
随机推荐
- topjui.common.js
function getTabWindow() { var curTabWin = null; if (topJUI.config.aloneUse) { curTabWin = window; } ...
- 27. USART, Universal synchronous asynchronous receiver transmitter
27.1 USART introduction 通用同步异步接收发射机(USART)对需要NRZ异步串行数据格式行业标准的外部设备,提供了一个灵活的全双工数据交换的方法.USART使用分数波特率生成器 ...
- SpringBoot-集成PageHelper5.1.2踩坑
背景就不介绍了,项目是SpringBoot+MyBatis搭建的,需要集成git上的PageHelper5.1.2,这个插件大家都比较熟悉了 之前一直用的PageHelper4.0.3,集成是这样的: ...
- Mybatis与Spring整合(CURD)
项目采用Maven构建,用Junit进行测试,数据库是Mysql,连接池是c3p0,未测试缓存部分 1.Maven的“pom.xml”文件 <project xmlns="http:/ ...
- "_CMTimeGetSeconds", referenced from:
CMTime is defined in the CoreMedia.framework. Add that framework to your project.
- JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
- Extremely fast hash algorithm-xxHash
xxHash - Extremely fast hash algorithm xxHash is an Extremely fast Hash algorithm, running at RAM sp ...
- 2019 Multi-University Training Contest 3 B 支配树
题目传送门 题意:给出衣服有向无环图(DAG),,定义出度为0的点为中心城市,每次询问给出两个点,求破坏任意一个城市,使得这两个点至少有一个点无法到达中心城市,求方案数. 思路:首先建立反向图,将城市 ...
- 2000w数据,redis中只存20w的数据,如何保证redis中的数据都是热点数据
redis 内存数据集大小上升到一定大小的时候,就会施行数据淘汰策略.redis 提供 6种数据淘汰策略: voltile-lru:从已设置过期时间的数据集(server.db[i].expires) ...
- Erlang学习记录:相关工具和文档
在线工具和文档 网址 说明 OTP Reference Page Index 内置模块查询 Erlang/OTP Applications N Kernel Reference Manual 入门官方 ...