基本介绍

时移直播基于常规的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('播放器已经创建');
});
 
 
原文链接
更多技术干货 请关注阿里云云栖社区微信号 :yunqiinsight

阿里云 Aliplayer高级功能介绍(四):直播时移的更多相关文章

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

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

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

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

  3. 阿里云 Aliplayer高级功能介绍(七):多分辨率

    基本介绍 网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: Source模式 source的方式指定多个清晰度的地 ...

  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. Spring随笔-核心知识DI与AOP

    DI 依赖注入,使得相互依赖的组件松耦合. AOP 面向切面编程,使各种功能分离出来,形成可重用的组件.

  2. FIR和IIR设计指标

  3. 学习k8s的经验

    最近在学k8s,总结一下安装k8s的坑. 1.晚上关于k8s的学习资料很多,多不如精,这个博客很好,https://blog.csdn.net/sinat_35930259/article/categ ...

  4. 最短路(模板Dtra

    #include<iostream> #include<cstdio> #include<cstring> using namespace std; const i ...

  5. 【POJ】3259 Wormholes

    题目链接:http://poj.org/problem?id=3259 题意:n个农场,m条双向路径,w条单向路径(虫洞).单向虫洞路径是负值.农夫想知道自己能不能看到自己(X). 题解:其实刚开始没 ...

  6. vue解决sass-loader的版本过高导致的编译错误

    Module build failed: TypeError: this.getResolve is not a function at Object.loader (E:\appEx\PreRese ...

  7. fuzzy commitment 和fuzzy vault

    Alice,这位令人惊异的魔术天才,正表演关于人类意念的神秘技巧.她将在Bob选牌之前猜中Bob将选的牌!注意Alice在一张纸上写出她的预测.Alice很神秘地将那张纸片装入信封中并封上.就在人们吃 ...

  8. PHP算法之两数相加

    给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它们的和 ...

  9. virtualbox manager命令小记

    virtualbox 控制虚拟机 VBoxManage list runningvms 列出运行的虚拟机 (返回名称和UUID): VBoxManage list runningvms Stop ru ...

  10. 一个切图仔的 JS 笔记

    1,常用数据操作 Math.round(mum,2);num.toFixed(2);两位数 Math.floor(); 返回不大于的最大整数 Math.ceil(); 则是不小于他的最小整数 Math ...