HTML5 Audio/Video API 自定义播放器
如何使用 HTMLAudioElement/HTMLVideoElement API 构建自定义播放器？play/pause/seek 的控制方法、volume/playbackRate 属性、事件监听(loadedmetadata/timeupdate/ended)如何处理？
回答
Yahuda
document.querySelector('video') 或 new Audio(url)。控制: element.play()(返回 Promise)、element.pause()、element.currentTime=30。属性: volume(0-1)、playbackRate(0.25-16)、muted、loop、preload。事件: loadedmetadata(timeupdate 获取 duration)、timeupdate(进度)、ended(结束)、waiting(缓冲)、canplay、error。进度条: progress.value=video.currentTime/video.duration。seek: video.currentTime=(e.offsetX/barWidth)*duration。倍速: video.playbackRate=1.5。注意: autoplay 需 muted。