ArtPlayer自定义时间显示格式的实现方案

ArtPlayer作为一款优秀的HTML5视频播放器，提供了丰富的自定义功能。在实际项目中，我们经常需要根据需求调整播放器的时间显示格式。本文将详细介绍如何通过插件方式修改ArtPlayer默认的小时:分钟:秒格式为更简洁的分钟:秒格式。

时间格式转换原理

视频播放器通常使用秒数作为时间单位进行内部存储和计算，但在界面上需要转换为更易读的格式。ArtPlayer默认使用HH:MM:SS格式显示时间，但某些场景下（如短视频播放）可能只需要显示MM:SS就足够了。

时间格式转换的核心算法是将总秒数分解为分钟和秒两个部分：

1. 分钟数 = 总秒数 ÷ 60（取整数部分）
2. 剩余秒数 = 总秒数 % 60

实现自定义时间格式插件

我们可以通过编写ArtPlayer插件来实现时间格式的自定义显示。以下是完整的实现方案：

function artplayerPluginTime() {
  return (art) => {
    // 秒数转MM:SS格式
    function secondToTime(second) {
      if (!second) return '00:00';
      const add0 = (num) => (num < 10 ? `0${num}` : String(num));
      const min = Math.floor(second / 60);
      const sec = Math.floor(second - min * 60);
      return [min, sec].map(add0).join(':');
    }

    // 更新时间显示
    function getTime() {
      const $control = art.controls.time;
      const newTime = `${secondToTime(art.currentTime)} / ${secondToTime(art.duration)}`;
      if (newTime !== $control.innerText) {
        $control.innerText = newTime;
      }
    }

    // 初始化时间显示
    getTime();
    
    // 监听相关事件
    const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];
    for (let index = 0; index < events.length; index++) {
      art.on(events[index], getTime);
    }
  };
}

插件实现要点解析

1. secondToTime函数：核心转换函数，处理秒到分钟:秒的转换，并确保个位数时前面补零。

2. getTime函数：获取当前播放时间和总时长，转换为目标格式后更新DOM显示。

3. 事件监听：通过监听三个关键事件确保时间显示的实时更新：

   • loadedmetadata：视频元数据加载完成时
   • timeupdate：播放时间更新时
   • progress：视频缓冲进度更新时

4. 性能优化：通过比较新旧时间字符串，避免不必要的DOM操作。

插件使用方式

在初始化ArtPlayer时，只需将插件加入plugins数组即可：

var art = new Artplayer({
  container: '.artplayer-app',
  url: '/assets/sample/video.mp4',
  plugins: [artplayerPluginTime()]
});

扩展思考

这种插件化实现方式体现了ArtPlayer良好的扩展性设计。基于类似原理，我们还可以实现更多自定义功能：

1. 添加毫秒显示
2. 实现倒计时显示
3. 添加章节标记
4. 自定义时间显示样式

通过理解ArtPlayer的插件机制，开发者可以灵活地定制播放器的各种功能，满足不同项目的特定需求。