HTML 理论知识点 ​

var audioplayer = document.getElementById('audioplayer') //获取到播放器示例
// 获取各个自定义的按钮
var playbt = document.getElementById('play')
var stopbt = document.getElementById('stop')
var pause = document.getElementById('pause')
var resetbt = document.getElementById('reset')
var stopVolbt = document.getElementById('stopvol')
var volbt = document.getElementById('volbt')
var vol = document.getElementById('vol')
var flag = true //记录是否静音
var volValue = 0.5 //记录静音前 你的音量 音乐最大值是1，最小值是0

playbt.onclick = function () {
  //播放
  audioplayer.play()
}

pause.onclick = function () {
  //暂停
  audioplayer.pause()
}

stopbt.onclick = function () {
  //停止播放
  audioplayer.pause()
  audioplayer.currentTime = 0 //当前播放的时间
}

resetbt.onclick = function () {
  //重置播放
  stopbt.click()
  audioplayer.play()
}

stopVolbt.onclick = function () {
  // 静音
  if (flag) {
    audioplayer.volume = 0
    stopVolbt.innerText = '开启静音'
    volbt.value = 0
    vol.innerHTML = 0
  } else {
    audioplayer.volume = volValue
    stopVolbt.innerText = '静音'
    volbt.value = volValue * 100
    vol.innerHTML = volValue * 100
  }
  flag = !flag
}

volbt.oninput = function () {
  //音量控制
  vol.innerHTML = this.value
  audioplayer.volume = this.value / 100
  volValue = audioplayer.volume
}

//获取进度条
var timer = null
var barContent = document.getElementById('a-bar_content')
var musicTime = document.getElementById('musicTime')
//进度条
function change() {
  musicTime.innerHTML = (function () {
    var t = Math.round(audioplayer.currentTime) // 当前已经播放的时间
    var dt = Math.round(audioplayer.duration) // 音乐的完整时间
    return Math.floor(t / 60) + ':' + (t % 60) + ' / ' + Math.floor(dt / 60) + ':' + (dt % 60)
  })()

  // 240为设计的进度条总长度
  barContent.style.width = (audioplayer.currentTime / audioplayer.duration) * 240 + 'px'
  if (audioplayer.currentTime === audioplayer.duration) {
    clearInterval(timer) // 播放结束
  } else {
    timer = setTimeout(change, 100)
  }
}
change()

//进度条方向控制
var bar = document.getElementById('a-bar')
bar.onclick = function (e) {
  const oEvent = e || window.event
  barContent.style.width = oEvent.offsetX + 'px'
  barContent.style.transition = 'width 0.1s ease'
  audioplayer.currentTime = (oEvent.offsetX / 240) * audioplayer.duration
}

var videoplayer = document.getElementById('videoplayer')
var vPlaybt = document.getElementById('v-play')
var vStopbt = document.getElementById('v-stop')
var vPause = document.getElementById('v-pause')
var vResetbt = document.getElementById('v-reset')
var vVolbt = document.getElementById('v-volbt')
var vVol = document.getElementById('v-vol')
var vStopVolbt = document.getElementById('v-stopvol')
//获取进度条
var vTimer = null
var vBarContent = document.getElementById('v-bar_content')
var videoTime = document.getElementById('videoTime')
var vFlag = true //记录是否静音
var vVolValue = 0.5 //记录静音前 你的音量

//播放
vPlaybt.onclick = function () {
  videoplayer.play()
}
//暂停
vPause.onclick = function () {
  videoplayer.pause()
}
//停止播放
vStopbt.onclick = function () {
  videoplayer.pause()
  //当前播放的时间
  videoplayer.currentTime = 0
  vBarContent.style.width = 0
}
//重置
vResetbt.onclick = function () {
  vStopbt.click()
  videoplayer.play()
}
//音量控制
vVolbt.oninput = function () {
  //音乐最大值是1，最小值是0
  vVol.innerHTML = this.value
  videoplayer.volume = this.value / 100
  vVolValue = videoplayer.volume
}
// 静音
vStopVolbt.onclick = function () {
  if (vFlag) {
    videoplayer.volume = 0
    vStopVolbt.innerText = '开启'
    vVolbt.value = 0
    vVol.innerHTML = 0
  } else {
    videoplayer.volume = vVolValue
    vStopVolbt.innerText = '静音'
    vVolbt.value = vVolValue * 100
    vVol.innerHTML = vVolValue * 100
  }
  vFlag = !vFlag
}
//进度条
function vChange() {
  videoTime.innerHTML = (function () {
    var t = Math.round(videoplayer.currentTime)
    var dt = Math.round(videoplayer.duration)
    return Math.floor(t / 60) + ':' + (t % 60) + ' / ' + Math.floor(dt / 60) + ':' + (dt % 60)
  })()
  //videoplayer.duration 音乐的完整时间
  vBarContent.style.width = (videoplayer.currentTime / videoplayer.duration) * 240 + 'px'
  if (videoplayer.currentTime == videoplayer.duration) {
    clearInterval(vTimer)
  } else {
    vTimer = setTimeout(vChange, 100)
  }
}
vChange()
//进度条方向控制
var vBar = document.getElementById('v-bar')
vBar.onclick = function (e) {
  const oEvent = e || window.event
  vBarContent.style.width = oEvent.offsetX + 'px'
  vBarContent.style.transition = 'width 0.1s ease'
  videoplayer.currentTime = (oEvent.offsetX / 240) * videoplayer.duration
  videoplayer.play()
}
//全屏
var elem = document.getElementById('v-full')
elem.onclick = function () {
  if (elem.webkitRequestFullScreen) {
    videoplayer.webkitRequestFullScreen()
  } else {
    alert('您的浏览器不支持全屏。。快换电脑！！')
  }
}