从零开发弹幕视频播放器

<video controls poster="/poster.jpg">
    <source
        src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.mp4"
        type="video/mp4"
    >
    <source src="/other.webm" type="video/webm">
    <track 
        src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
        kind="captions" 
        srclang="en"
        label="显示在这"
        default
    >
    浏览器不支持 video 标签</video>

使用浏览器默认的视频控制器

    none      不进行预加载
    metadata  预加载视频元数据
    auto      预加载整个视频

  subtitles     字幕给观影者看不懂的内容提供解释
  captions      隐藏式字幕提供了音频的转录甚至是翻译
  descriptions  视频内容的文本描述
  chapters      章节标题用于用户浏览媒体资源的时候
  metadata      脚本使用的 track 用户不可见

在媒体开始播放时触发可能是初次播放、暂停后恢复或结束后重新开始

返回视频的宽高（width/height
 属性可能被 css 影响）

在没有开始播放的情况下加载或重新加载视频来源，比如修改 src

<div class="player player-loading">
    <video
      playsinline
      x5-playsinline
      src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
    />
    <div class="loading"></div>
    <div class="controls">
      <div class="bar">
        <div class="bar_buffered"></div>
        <div class="bar_played"></div>
      </div>
      <div class="control_items">
        <button class="play_btn"></button>
        <div class="time">0 / 0</div>
        <button class="fullscreen"></button>
      </div>
    </div></div>

.player-loading .loading { opacity: 1; }.player-playing .play_btn::after { content: '暂停'; }.player-controls-hide { cursor: none; }.player-controls-hide .controls { opacity: 0; }.player-fullscreen .fullscreen:after { content: '退出全屏'; }

const player = document.querySelector('.player')const video = document.querySelector('video')

let controlsTimer = nullfunction showControls() {    clearTimeout(controlsTimer)
    player.classList.remove('player-controls-hide')    updatePlayedBarAndTime() // 更新进度条，查看下一小节}function delayHideControls() {    showControls();
    controlsTimer = setTimeout(() => {        if (video.played.length && !video.paused) {
            player.classList.add('player-controls-hide')
        }
    }, 3000)
}
player.addEventListener('click'， delayHideControls)
player.addEventListener('mousemove'， delayHideControls)
video.addEventListener('play', delayHideControls)
video.addEventListener('pause'， showControls)

const playedBar = document.querySelector('.bar_played')const bufferedBar = document.querySelector('.bar_played')const time = document.querySelector('.time')function updatePlayedBarAndTime(currentTime, percentage) {
    currentTime = currentTime == null ? Math.round(video.currentTime) : currentTime
    percentage = percentage == null ? Math.min(video.currentTime / video.duration, 1) : percentage
    time.textContent = currentTime + ' / ' + Math.round(video.duration)
    playedBar.style.transform = 'scaleX('+ percentage +')'}

video.addEventListener('durationchange', updatePlayedBarAndTime)
video.addEventListener('timeupdate', () => {  if (!player.classList.contains('player-controls-hide')) {    updatePlayedBarAndTime()
  }
})
video.addEventListener('progress', () => {  const percentage = video.buffered.length ? video.buffered.end(video.buffered.length - 1) / video.duration : 0;
  bufferedBar.style.transform = 'scaleX('+ Math.min(percentage, 1) +')'})

const playPauseBtn = document.querySelector('.play_btn')

playPauseButton.addEventListener('click', evt => {
  evt.stopPropagation() // 为了防止父级处理事件，比如视频控件
  if (video.paused) {
    video.play()
  } else {
    video.pause()
  }
})
video.addEventListener('play', () => {
  player.classList.add('player-playing')
})
video.addEventListener('pause', () => {
  player.classList.remove('player-playing')
})
video.addEventListener('ended', () => {
  player.classList.remove('player-playing')
  video.currentTime = 0})

const bar = document.querySelector('.bar')const { width: barWidth, x: barLeft } = bar.getBoundingClientRect()let barPending = falselet barLastX = 0let videoSeekTime = -1function onBarPointerStart(evt) {
    evt.preventDefault()
    bar.setPointerCapture(ev.pointerId)
    bar.addEventListener('pointermove', this.onPointerMove, true)
    video.pause()
    barLastX = evt.pageX
    const [percentage, seekTime] = calcPercentageAndSeekTime(evt.pageX)    updatePlayedBarAndTime(seekTime, percentage)
}function onBarPointerMove(evt) {
    evt.preventDefault()
    barLastX = evt.pageX
    if (barPending) return
    barPending = true
    requestAnimationFrame(handleBarMove)
}function onBarPointerEnd(evt) {
    evt.preventDefault()
    bar.releasePointerCapture(evt.pointerId)
    bar.removeEventListener('pointermove', onBarPointerMove, true)    if (videoSeekTime > 0) video.curentTime = videoSeekTime
    video.play()
}function calcPercentageAndSeekTime() {    const percentage = Math.max(Math.min((barLastX - barLeft) / barWidth, 1), 0)
    videoSeekTime = percentage * video.duration
    return [percentage, videoSeekTime]
}function handleBarMove() {    if (!barPending) return
    const [percentage, seekTime] = calcPercentageAndSeekTime()    updatePlayedBarAndTime(seekTime, percentage)
    barPending = false}

bar.addEventListener('pointerdown', onBarPointerStart, true)
bar.addEventListener('pointerup', onBarPointerEnd, true)
bar.addEventListener('pointercancel', onBarPointerEnd, true)

const isIos = /(iPad|iPhone|iPod)/gi.test(navigator.platform)const fullscreenBtn = document.querySelector('.fullscreen')
fullscreenBtn.addEventListener('click', evt => {
    evt.stopPropagation()    if (document.fullscreenElement) {        if (isIos) {
            video.webkitExitFullscreen()
        } else {            document.exitFullscreen()
        }
    } else {        if (isIos) {
            video.webkitEnterFullscreen()
        } else {
            player.requestFullscreen()
        }
    }
})document.addEventListener('fullscreenchange', () => {
  player.classList.toggle('player-fullscreen', document.fullscreenElement)
})

video.addEventListener('canplay', () => {
    player.classList.remove('player-loading')
})
video.addEventListener('waiting', () => {
    player.classList.add('player-loading')    
    const startWaitingTime = video.currentTime
    const checkCanPlay = () => {      if (startWaitingTime !== video.currentTime) {
        player.classList.remove('player-loading')
        video.removeEventListener('timeupdate', checkCanPlay)
      }
    }
    video.addEventListener('timeupdate', checkCanPlay)
})

let prevCurrentTime = 0let playerLoading = falselet loadingTimer = setInterval(() => {    const currentTime = video.currentTime
    if (!playerLoading && prevCurrentTime === currentTime && !video.paused) {
        player.classList.add('player-loading')
        playerLoading = true
    } else if (playerLoading && currentTime !== prevCurrentTime) {
        player.classList.remove('player-loading')
        playerLoading = false
    }
    prevCurrentTime = currentTime
}, 100)

if (video.textTracks && video.textTracks.length) {    const defaultLang = navigator.language?.split('-')[0] || 'zh'
    let saw = false
    video.textTracks.forEach(track => {        if (track.language === defaultLang) {
            track.mode = 'showing'
            saw = true
        } else {
            track.mode = 'hidden'
        }
    })    if (!saw) video.textTracks[0].mode = 'showing'
    // 这里只是默认显示一个 textTrack
    // 应该有个菜单可以让用户选择字幕，这里就省略了}

::cue {  color:#fff;  background: transparent;  text-shadow: 2px 3px 5px rgba(0, 0, 0, .5);
}

if (video.textTracks && video.textTracks.length) {    const container = document.querySelector('.player_subtitle') // 字幕容器
    const track = video.textTracks[0]
    track.mode = 'hidden'
    track.oncuechange = () => {        const cue = track.activeCues[0] // cue 代表一条字幕
        container.innerHTML = ''
        if (cue) {            const subtitle = document
                                .createElement('div')
                                .appendChild(cue.getCueAsHTML())
                                .innerHTML
            // 因为 getCueAsHTML 返回的是 document-fragment
            
            container.innerHTML = subtitle.split(/\r\n|\n|\r/).map(t => `<p>${t}</p>`).join('')
        }
    }
}

if (document.pictureInPictureEnabled) { // 是否启用画中画
    const pip = document.querySelector('.pip')
    pip.style.display = 'block'
    pip.addEventListener('click', () => {        if (document.pictureInPictureElement) { // 当前画中画的元素
            video.exitPictureInPicture()
        } else {
            video.requestPictureInPicture() // 返回 Promise，里面是 pipWindow
        }
    })

    video.addEventListener('enterpictureinpicture', pipWindow => {        console.log(pipWindow.width, pipWindow.height)
        player.classList.add('player-pip')
    })

    video.addEventListener('leavepictureinpicture', () => {
       player.classList.remove('player-pip')
    })
}

const screenshotBtn = document.querySelector('.screenshot_btn')

screenshotBtn.addEventListener('click', () => {    const canvas = document.createElement('canvas')
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)    const fileName = video.currentTime + '.png'
    canvas.toBlob(blob => {        const url = URL.createObjectURL(blob)        const a = document.createElement('a')
        a.href = url
        a.download = fileName
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()        document.body.removeChild(a)        URL.revokeObjectURL(url)
    }, 'image/png')
})