ps-tcplayer/src/tccomponents/CountdownComponent/index.js

Tencent Cloud Player component with Vue2/Vue3 compatibility

import html from './index.html.js'
import './index.scss'
import { parseDom } from '../../utils'

/**
 * 倒计时组件
 */
export default class CountdownComponent {
  /**
   * @constructor 倒计时组件构造函数
   */
  constructor(player, open = true, time, type, starOpen) {
    this.html = parseDom(html.CountdownHtml)
    this.player = player
    this.open = open
    this.time = time? time : 15
    this.type = type
    this.isClicked = false
    this.starOpen = starOpen;
    this.player.on('timeupdate', () => this.timeupdate())
  }

  createEl (el) {
    if(this.open){
      el.appendChild(this.html)
    }
  }
  
  timeupdate() {
    const player = this.player;
    if (this.type == 'star') {
      var lasttime = player.duration() - player.currentTime()
      if (lasttime <= this.time) {
        this.starOpen();
      }
    } else {
      if (this.open) {
        var txtbox = this.html.querySelector('.countdown')
        var lasttime = player.duration() - player.currentTime()
        if (lasttime <= this.time) {
          lasttime = lasttime - lasttime % 1 + 1
          var countdownString = `<div class="countdown-txt">
        <span class="time">${lasttime}s</span>后为您播放下一节
        </div>`
          txtbox.innerHTML = countdownString
        } else {
          txtbox.innerHTML = ""
        }
      }
    }
  }

  getVideoTime(duration) {
    let secondTotal = Math.round(duration)

    let hour = Math.floor(secondTotal / 3600)
    let minute = Math.floor((secondTotal - hour * 3600) / 60)

    let second = secondTotal - hour * 3600 - minute * 60

    if (minute < 10) {
        minute = '0' + minute
    }
    if (second < 10) {
        second = '0' + second
    }
    return hour === 0 ? minute + ':' + second : hour + ':' + minute + ':' + second
  }
}