第 6 课 · Web前端技术 2 / 18 | 编码:L06-05a
观察媒体播放与事件响应

播放一段黄梅戏,观察播放器的变化

播放《谁料皇榜中状元》的一小段,试试暂停和拖动进度条,观察画面、控件与下方状态提示。

播放状态:尚未播放

韩再芬 ·《谁料皇榜中状元》

观察与思考

点击播放、暂停,或拖动进度条后,播放器发生了哪些变化?

  • 播放与暂停时,按钮和下方提示怎样变化?
  • 视频暂停时,将进度条拖到另一个时间点,视频会自动继续播放吗?
认识媒体事件(点击展开)

video 用来展示视频,controls 提供浏览器自带的播放控件。

开始播放或暂停时,浏览器会分别触发 play、pause 事件。JavaScript 可以监听这些事件,更新下方的状态文字。

例如,视频暂停在第 10 秒,将进度条拖到第 30 秒后,播放位置变为第 30 秒,通常仍保持暂停。拖动进度条改变的是“播放到哪里”,点击播放按钮才会继续播放。