TimeLine(时间轴插件)

应用场景，直播回放的处理

设计架构图全览

截屏

解决的问题

Example

项目地址：https://future-component.github.io/TimeLine/

演示地址：https://future-component.github.io/TimeLine/example/index.html

GitHub地址：https://github.com/Future-component/TimeLine

实例代码

var timeline = TimeLine();
console.log(timeline)
var timeStart = (new Date()).getTime();

function logger(val, style) {
  $('#message').append(`<p style="${style}">${val}</p>`);
}

timeline.init({
  data: [{
    eventType: 'ppt',
    startTime: timeStart + 1000,
    data: 'ppt第一页'
  }, {
    eventType: 'text',
    startTime: timeStart + 3000,
    data: '第一条消息',
  }, {
    eventType: 'text',
    startTime: timeStart + 2000,
    data: '第二条消息',
  }, {
    eventType: 'audio',
    startTime: timeStart + 5000,
    data: '我是音乐'
  }, {
    eventType: 'audio',
    startTime: timeStart + 12000,
    data: '我是音乐2'
  }],
}, {
  text: function(val) { logger('%c *** text ***:' + JSON.stringify(val), 'color: #2196F3') },
  audio: function(val) { logger('%c *** audio ***:' + JSON.stringify(val), 'color: #009688') },
}, function() {
  $('#message').html('');
});

timeline.complete(function() {
  logger('%c 播放结束啦~~~~', 'color: #9C27B0');
  $('.btn').removeClass('active');
})

timeline.progress(function(data) {
  var dataTmp = JSON.parse(data);
  logger('%c 当前进度：' + data, 'color: #CDDC39');
  $('#currentTime').text(dataTmp.currentTime);
  $('#totalTime').text(dataTmp.totalTime);
});

$('.btn').click(function() {
  var id = $(this).attr('id');
  $('.btn').removeClass('active');
  $(this).addClass('active');

  switch(id) {
    case 'play':
      timeline.play();
      break;
    case 'pause':
      timeline.pause();
      break;
    case 'stop':
      timeline.stop();
      break;
    default:
      break;
  }
});

API

函数名 参数 含义
init {options(Object), actions(Object-Func), initPage(Func)} 初始化时间轴，以及事件在时间轴上的对齐
progress (Func) 时间轴的当前进度
pause Empty 暂停时间轴播放
stop Empty 停止时间轴播放，播放状态回到起点位置
play Empty 继续播放
complete (Func) 时间轴完成的回调

TODO