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

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

基本介绍

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

3439f2a05bbcdd5e71a7e35805a83627d95c79c7

直播时移在播放器中的表现为可以支持当前时间之前的直播内容的回看,当鼠标放到进度条上面时,会出现负数的时间提示,表示回看之前的几分几秒的视频。

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"图标,可以切换为直播状态:

79b798e0c961a0c3b36f918246ff4b54daaef0be

时移回放地址

当需要区间回放时候,直播服务的播放地址通过添加相关的参数,可以回放指定区间的视频,具体参考:直播时移 但是有一种特殊情况需要说明,如果时移回放的是以前某个区间的视频, 比如当前是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('播放器已经创建');
    });
目录
相关文章
|
Web App开发 资源调度 JavaScript
vue element plus 安装
vue element plus 安装
339 0
|
16天前
|
机器学习/深度学习 数据采集 人工智能
通义实验室Mobile-Agent-v3开源,全平台SOTA的GUI智能体,支持手机电脑等多平台交互
近日,通义实验室MobileAgent团队正式开源全新图形界面交互基础模型 GUI-Owl,并同步推出支持多智能体协同的自动化框架 Mobile-Agent-v3。该模型基于Qwen2.5-VL打造,在手机端与电脑端共8个GUI任务榜单中全面刷新开源模型性能纪录,达成全平台SOTA。
191 2
|
Web App开发 移动开发 JavaScript
使用Aliplayer在微信中播放视频的正确姿势
沐钦分享下利用aliplayer在微信中播放视频的操作方式和效果
17040 0
|
缓存 视频直播 Linux
FFmpeg开发笔记(四十三)使用SRS开启SRT协议的视频直播服务
《FFmpeg开发实战》书中介绍了轻量级流媒体服务器MediaMTX,适合测试但不适用于生产环境。SRS是一款国产开源服务器,支持RTMP、SRT等协议,适合生产使用。要启用SRS的SRT推流,需配置`srt.conf`,开启SRT服务并配置端口。在确保FFmpeg集成libsrt后,拉流则使用类似但带有`m=request`的地址。在Windows上,同样需要集成libsrt的FFmpeg来使用ffplay拉流。SRS的日志确认了推拉流的成功。书中提供更深入的FFmpeg开发知识。
578 2
FFmpeg开发笔记(四十三)使用SRS开启SRT协议的视频直播服务
|
开发工具
查询天气预报案例
这是一个关于如何查询天气预报的步骤指南,包括五个步骤:找到阿里云的天气服务、购买服务、获取AppCode和秘钥、参考SDK调用接口以及使用Hutool工具进行接口调用。提供了详细的操作截图和接口返回的示例数据。完整文档链接可在文中找到。
600 4
|
存储 网络安全 数据安全/隐私保护
制作p12证书
制作p12证书
187 0
|
存储 NoSQL 安全
使用redis记录用户登录状态
使用redis记录用户登录状态
493 0
|
运维 监控 Kubernetes
EDAS助力「人人视频」新业务快速稳健上云
随着疫情袭来,影院全部封闭,然而大家看电影的热情不减,但优质渠道比较少,人人视频敏锐的探察到这个市场需求,结合自身用户量和优质片源的优势,准备推出电影点播业务!
5950 80
EDAS助力「人人视频」新业务快速稳健上云
|
机器学习/深度学习 人工智能 达摩院
视觉AI技术体系及趋势概述
视觉技术是 AI 里应用最广,任务最多,技术方面非常复杂,发展非常快的一个AI的主要子方向。
|
测试技术
400电话客服呼叫中心搭建流程及注意事项
400电话客服呼叫中心搭建流程及注意事项
631 0
400电话客服呼叫中心搭建流程及注意事项