11 - Custom Video Player

展示

內容概要

使用html5的video客製化播放器功能

video本身提供相當齊全的事件可供監聽，但因不熟悉需搭配mdn網站 (opens new window)服用

主要可會使用的屬性

• paused 暫停
• volume 音量
• playbackRate 播放速率
• currentTime 目前播放秒數
• duration 全部秒數

重點整理

textContent

用來修改tag中間的內容

toggle.textContent = '填入的文字'

dataset

善用dataset屬性實現相同功能提供不同變數的操作

html中設置

<button data-skip="-10" class="player__button">« 10s</button>

js中取用

this.dataset.skip

video操作

操作video的方式 直接選取video tag後直接使用

video.addEventListener('play', toggleBtn)
video.addEventListener('click', togglePlay)
video.addEventListener('pause', toggleBtn)
video.addEventListener('timeupdate', updateProgressBar)

let currentTime = video.currentTime
let duration = video.duration


video.requestFullscreen()
video.play()
video.pause()