从0开始写一个播放器系列-数据格式篇

从0开始写一个播放器系列-数据格式篇

设计所需要的数据格式

本片文章补充一下所需要得到数据格式

首先需要确定一下调用的方式

因为使用typescript开发,对class的支持度比较高, 所以使用new调用

new dpVideo(parentDom,urlList,options)

解释一下

parentDom 传入外层包裹的html元素,注意只要dom节点元素,不需要选择器(考虑到适配react和vue)

urlList, 数据格式如下

// 格式进行修改 :
// 格式1: "http://asdasd"
// 格式2:  ["http://asdasd",{defaultId:0,urlList:[{id:0,url:'http://asdasd',label:'360P'}]}]

之所以支持这么多种数据格式是为了更好的匹配next按钮和选择清晰度按钮

options, 传入配置选项

配置选项比较多具体如下

{
  barrageShow:true, // 是否开启弹幕功能, 默认为true
  barrageList:[
      {
          msg:"",//弹幕内容
          time:Number // 弹幕发送时间,相对于视频的毫秒数
      }
  ], // 弹幕数组默认为空,上方标识弹幕数据格式
  barrageScope: 1500, // 默认为1500毫秒, 在可视区域停留时间
  title: {
    // 标题
    show: true, // 标题是否显示
    label: '' // 标题显示内容
  },
  // 控制条显示
  controller: true, // 默认显示
  // 控制条配置项, 如果用户手动指定则按照用户手动指定的解析
  controllerOption: {
    play: true, // 播放按钮, 默认为true
    next: false, // 下一个按钮, 默认为false, 如果传入的videoUrl的格式为2或者4的话则默认为true
    clarity: false, //选择清晰度, 默认为false, 如果传入的videoUrl格式为3,4为true
    volume: true, // 音量默认为true
    playbackRate: true, // 播放速度默认为true
    playbackRateList: ['0.5x', '1.0x', '1.25x', '1.5x', '2.0x'], // 播放速度数组默认值
    togglePip: true, // 画中画 默认true
    documentFull: true, // 网页全屏 默认true
    windowFull: true, // 全屏 默认true
    Mirror: false // 镜像 默认false
  }
}

数据格式可能会修改,本篇数据格式如果发现不合理处会随时做出调整
GitHub地址:https://github.com/lidppp/dp-video
本人博客地址: (https://www.lidppp.com)[https://www.lidppp.com]