基本介绍

时移直播基于常规的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. Linux下rsync的安装及简单使用

    2018-09-25 15:39:04 一.RSYNC安装环境: centos6.5 iptables关闭和selinux为disabled 源码安装:到rsync官网下载rsync源码安装包,上传到 ...

  2. DRF的视图组件

    目录 DRF的视图组件 两大视图类 六大视图工具类 九大工具视图类 两大视图集基类 DRF的视图组件 DRF的视图组件大概分以下几类 两大视图类 APIView.GenericAPIView from ...

  3. LA2218 Triathlon /// 半平面交 oj22648

    题目大意: 铁人三项分连续三段:游泳 自行车 赛跑 已知各选手在每个单项中的速度v[i],u[i],w[i] 设计每个单项的长度 可以让某个特定的选手获胜 判断哪些选手有可能获得冠军 输出n行 有可能 ...

  4. SqlMapClient operation; bad SQL grammar []; nested exception is com.ibatis.common.jdbc.exception.NestedSQLException: InlineParameterMap

    <select id="getResByName" resultClass="Resources" parameterClass="java.l ...

  5. 笔记:Python防止SQL注入

    非安全的方式,使用动态拼接SQL 输入' or 1 = 1 or '1 sql ="""SELECT * FROM goods WHERE name = '%s';&qu ...

  6. 两个table合并

    1.两个一样的table合并用Merge函数即可合并(但要求table要有主键id) DataTable1.Merge(DataTable2); 2.没写完,以后继续补充(只有经过笔者验证,能用的才会 ...

  7. 【学术篇】bzoj3262 陌上花开. cdq分治入门

    花儿们已经很累了-- 无论是花形.颜色.还是气味, 都不是为了给人们摆出来欣赏的, 更不是为了当做出题的素材的, 她们并不想自己这些属性被没有生命的数字量化, 并不想和其它的花攀比, 并无意分出个三六 ...

  8. grunt完整的配置demo

    const path = require('path') const fs = require('fs'); module.exports = function (grunt) { grunt.reg ...

  9. The Counting Problem

    The Counting Problem 询问区间\([a,b]\)中\(1\sim 9\)出现的次数,0 < a, b < 100000000. 解 显然为数位递推,考虑试填法,现在关键 ...

  10. js实现点击空白处隐藏

    部分业务要求除了某元素外点击其他对象,对应的元素隐藏,下面是一个demo效果, <!DOCTYPE html> <html> <head> <meta cha ...