阿里云 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服务功能介绍
随机推荐
- 【转】Linux(CentOS) vps安装xfce桌面+VNC
以前我发过一篇文章利用vnc远程连接VPS桌面,其中用到的是kde桌面,后来知道xfce总体来说比kde占得内存还小些,因为xfce轻便.简单,今天因为一些原因需要在我的vps上搭建用户桌面,所以就试 ...
- SPSS缺失值得分析处理
SPSS缺失值得分析处理 在资料收集的过程中,由于各种原因可能导致数据收集不全,就会产生缺失值,且这种情况往往无法避免.如果缺失值处理不当,就会导致分析结果精度降低,出现偏倚甚至是错误的理论,因此缺失 ...
- C#标准的事件模型
事件模型的几个规范: 委托类型的名称以EventHandler结束: 委托原型返回值为void; 委托原型具有两个参数:sender表示事件触发者,e表示事件参数: 事件参数的名称以EventArgs ...
- 转: div:给div加滚动条 div的滚动条设置
div 的滚动条问题: 两种方法: 一. <div style=" overflow:scroll; width:400px; height:400px;”></div&g ...
- spring配置hibernate的sessionFactory
1.首先通过dataSource来配置sessionFactory <!--读入配置文件 --> <bean id="propertyConfigurer" cl ...
- vue created与activated的区别
搬运自:https://www.cnblogs.com/goloving/p/9256212.html 使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新 ...
- 《人月神话》读书笔记 PB16110698 第七周(~4.19)
每逢读书笔记上交作业时刻,班级blog页面上总能看到<人月神话>相关的读书笔记,本次软工课邓老师推荐的第一篇读书笔记也是写的<人月神话>,算是对它“耳濡目染”了.本周,我终于抽 ...
- JS对象 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
返回指定的字符串首次出现的位置 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 语法 stringObject.indexOf(substring, startpos) 参 ...
- ElasticSearch 增删改查
HTTP 协议本身语义:GET 获取资源.POST 新建资源(也可以用于更新资源).PUT 更新资源.DELETE 删除资源. ES通过HTTP Restful方式管理数据:1.格式:#操作 /ind ...
- java排序及泛型
一.用泛型实现快排,可以传入不通类型进行排序,比如String数组,Integer数组. /** * 快速排序 * * @author chx * */ public class QuickSort ...