B2. 多媒体与嵌入：让网页会说话

2.1 音频audio与视频video元素

让网页开口说话

"给网页加背景音乐就像用Python播放MP3？但HTML只需要一个<audio>标签！为什么有些音乐在手机能播网页却不行？格式兼容性是个大坑！"

<!-- 基础音频播放器 -->
<audio controls>
  <source src="bgm.mp3" type="audio/mpeg">
  你的浏览器不支持音频播放（就像Python的try-except）
</audio>

<!-- 带高级设置的视频播放 -->
<video width="400" controls muted>
  <source src="cat.mp4" type="video/mp4">
  <track label="中文字幕" kind="subtitles" src="sub.vtt" srclang="zh">
</video>

属性详解

• controls：显示播放控制条（播放/暂停、音量、进度条等）
• autoplay：页面加载后自动播放（注意：很多浏览器会阻止带声音的自动播放）
• muted：静音播放（常用于自动播放视频）
• loop：循环播放
• preload：预加载设置（auto/metadata/none）

⚠️ 易错点：忘记写controls属性会导致播放器没有控制条！视频文件路径错误是最常见404错误

2.2 iframe的使用与限制

网页中的俄罗斯套娃

"想在网页里嵌入B站视频？就像Python导入模块那样简单！但为什么老师总说iframe有安全隐患？"

<iframe
  src="https://www.bilibili.com/video/BV1GJ411x7h7"
  width="560"
  height="315"
  allowfullscreen>
</iframe>

属性详解

• src：嵌入内容的URL（可以是网页、视频、地图等）
• width/height：设置iframe的宽高（建议用CSS控制）
• allowfullscreen：允许全屏显示
• sandbox：安全限制（如allow-scripts允许执行脚本）
• loading：加载方式（eager立即加载，lazy延迟加载）

安全沙盒模式

"就像Python的沙箱环境，给iframe加上防护罩："

<iframe
  src="https://example.com"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy">
</iframe>

⚠️ 易错点：随意嵌入第三方网站可能导致XSS攻击！加载慢的iframe要用loading="lazy"

2.3 画布canvas的使用

创建数字画板

"还记得Python的turtle绘图吗？canvas更强大！但为什么必须用JavaScript操作？"

<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d'); // 就像拿到画笔
  ctx.fillStyle = '#FF0000'; // 设置红色
  ctx.fillRect(10, 10, 100, 50); // 绘制矩形
</script>

常用方法

• getContext('2d')：获取2D绘图上下文
• fillRect(x, y, width, height)：绘制填充矩形
• strokeRect(x, y, width, height)：绘制边框矩形
• beginPath()：开始新路径
• moveTo(x, y)：移动画笔到指定位置
• lineTo(x, y)：绘制直线到指定位置

路径绘制进阶

"想画对话气泡？需要组合多个绘图指令："

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill(); // 绘制三角形

⚠️ 易错点：忘记调用beginPath()会导致绘图路径叠加！canvas默认透明需手动设置背景色

知识回顾

• <audio>/<video>需要controls显示播放控件，注意文件格式兼容性
• iframe可嵌入外部网页，但需注意安全限制和性能影响
• canvas绘图必须通过JavaScript操作，需要先获取绘图上下文
• 常见错误：文件路径错误、忘记重要属性、canvas未获取上下文直接绘图

课后练习

1. （填空）让视频自动静音播放需要添加____属性，延迟加载iframe用____属性

2. （代码纠错）以下canvas代码为什么无法绘图？

<canvas width="200" height="100">
  const ctx = document.querySelector('canvas').getContext('2d');
  ctx.fillRect(50, 50, 100, 50);
</canvas>

3. （选择）哪个属性可以防止iframe执行JavaScript？

   • A. sandbox="allow-scripts"
   • B. sandbox=""
   • C. security="restricted"
   • D. allow="none"

4. （项目）制作canvas动画：让红色方块从左到右循环移动（提示：使用requestAnimationFrame）