码上问学问代码之理，学编程之道

单元七 · 网页多媒体

让页面会动、会响。本单元对应教材单元七（4 学时）：视频与音频嵌入、source 标签、视频与音频的 DOM 操作。 重点不是「插一个视频」，而是「用 JS 控制播放」——这为单元八的轮播图、焦点图打基础。

本单元目标：会用 <video>/<audio> 嵌入媒体；理解 <source> 多格式回退；能写 JS 控制 play()/pause()/currentTime。

一、知识准备：媒体标签自带播放器

audio / video：一个标签自带整套播放器，属性控制外观与行为<video> 常用属性· controls显示播放控件· autoplay + muted自动播放（须静音）· loop循环播放· poster封面图多格式兼容（source）<video controls> <source src="a.mp4"> <source src="a.webm"></video>浏览器挑支持的播JS 联动：video.play() / pause() / currentTime —— 自定义按钮就是调这些方法autoplay 必须配 muted：浏览器不许「带声自动播」，这是用户体验保护音视频文件大，别用 base64 内嵌；用 src 指向文件，让浏览器流式加载

生活类比：万能播放器

浏览器内置了一个「播放器」。<video> 像把光盘塞进机器，controls 是「显示播放按钮」。但不同机器认的格式不同（mp4/webm/ogg），<source> 就是「这一个播不了就试下一个」。

  • video：controls（显控键）、autoplay（自动播，多被浏览器禁）、muted（静音）、poster（封面）。
  • audio：与 video 同族，无画面。
  • source：多格式回退，浏览器选第一个能播的。
  • DOM 操作：.play() / .pause() / .currentTime / .volume 用 JS 操控。

    • 二、实战演练：自定义控制按钮

    文件： u7/media.html
    media.html
    <video id="mv" width="320" controls>
  <source src="poem.mp4" type="video/mp4">
  <source src="poem.webm" type="video/webm">
  您的浏览器不支持 video 标签
</video>
<button onclick="document.getElementById('mv').play()">播放</button>
<button onclick="document.getElementById('mv').pause()">暂停</button>
    效果预览运行结果
    效果：页面有原生播放器；两个按钮也能控制播放/暂停（JS 操作 DOM）。
    故意写错：getElementById('mv') 写成 'myVideo'——控制台报 null 无法 play。id 必须和标签一致，这也是单元八事件绑定的基本功。

    三、强化训练

    1为什么 video 里要放多个 <source>？浏览器怎么选？
    2用 JS 让视频跳到第 10 秒，该怎么写？（提示：currentTime）
    3autoplay 常被浏览器拦截，怎么配合 muted 才能自动播放？

    四、课后实训

    作业：做一个 audio.html 古诗朗读页：一个 audio（多格式 source）、显示当前时间的进度文字（用 timeupdate 事件）、播放/暂停/快进 5 秒三个按钮。

    本单元小结

    ← 上一单元单元六 · HTML5 表单

    📝 本节自测

    做完点「检查本节」看解析与得分；做错可重做。