2.5 多媒体与嵌入内容：音视频进厂

2.5 多媒体与嵌入内容：音视频进厂

本节摘要：音频与视频元素让页面能播声音放录像，内嵌框架则把别的页面整页搬进来。本节围绕车间培训页的需求讲三件事：播放器控件的开启、多格式备选的写法、字幕轨的挂载；同时建立嵌入内容的两条红线——外部页面不可全信、自动播放不可滥用。看板本体用不上这些零件，但它们是结构班零件库的正式成员。

车间培训页的点播需求

生产看板本身安静运行，但厂里的培训页需要多媒体：设备安全操作规程配一段示范视频，晨会纪要配一段录音，宿舍楼的新装修介绍嵌一张全景漫游页。多媒体零件进厂前要先立规矩：谁点谁播、格式备足、字幕齐全。头一条直接写进属性——永远显示浏览器自带的播放控件，禁止页面一打开就出声，这是全行业的体验共识，也是浏览器对声音自动播放日益收紧的政策方向。

<!-- 培训页的安全操作视频：控件、封面、多格式备选 -->
<video controls width="480" height="270"
       poster="safety-cover.jpg"
       preload="metadata">
  <!-- controls：显示播放暂停进度条音量等原生控件，必须开 -->
  <!-- poster：视频加载前的封面图，用第一帧之外的定制画面 -->
  <!-- preload 元数据：只预取时长尺寸，不偷跑流量 -->

  <source src="safety-demo.mp4" type="video/mp4">
  <source src="safety-demo.webm" type="video/webm">
  <!-- 多格式备选：浏览器从上到下挑第一个能播的， MP4 之外给一份开源格式兜底 -->

  <track kind="subtitles" src="safety-zh.vtt" srclang="zh-CN" label="简体中文" default>
  <!-- 字幕轨：听障员工的平等访问权，也是嘈杂车间的实用功能 -->

  您的浏览器不支持视频播放，可到培训室观看演示或阅读图文版规程。
  <!-- 兜底文案：老设备不支持时的降级提示，别让它空着 -->
</video>
​

<!-- 晨会纪要的录音条目：音频的极简用法 -->
<p>
  <audio controls preload="none">
    <!-- preload none：点击前完全不下载，省流量模式 -->
    <source src="meeting-note.mp3" type="audio/mpeg">
    当前浏览器无法播放音频，纪要文字版见下方。
  </audio>
</p>
<!-- 音频不需要宽高与封面，一个控件开关足矣 -->
​

两个代码块演示了同一条思路在两种媒体上的落地：控件必开、备选给足、兜底不空。备选写法的本质是"把选择权交给浏览器"——服务器把能给的格式都摆出来，浏览器按自己的能力挑，比用脚本探测浏览器型号可靠得多，后者是上一个时代的做法。

字幕轨：一行结构换来的三重价值

字幕文件是一份纯文本时间轴清单，每行标"几点几分到几点几分，显示哪句话"。挂上字幕轨带来三重价值：听障员工获得平等访问；嘈杂车间里不便外放的场合照看不误；搜索引擎能索引视频台词，培训页的搜索权重随之提升。写结构与不写结构的差别在此非常直观——同一段视频，挂不挂字幕轨，可用性与可发现性完全两个量级。

时间轴清单的格式示意如下，感受一下它的朴素程度：

字幕文件的内部长这样（纯文本，时间轴加台词）：

00:00:01.000 --> 00:00:04.000
开机前必须确认急停按钮位于释放位

00:00:04.500 --> 00:00:08.000
卡盘钥匙用毕立即取下，严禁留在卡盘上

00:00:08.500 --> 00:00:12.500
切削区防护罩未闭合不得启动主轴
​

三句话的安全要点，配着时间轴就能逐句打到画面上。工厂场景之外，会议录像、产品演示、公开课无不同理——结构班多挂一条字幕轨，页面就多服务一批人。

内嵌框架：把别人的页面搬进来

内嵌框架像在页面上开一扇窗，窗里显示另一个完整页面。看板的合理用法是嵌一张厂区监控画面页；培训页嵌一份外部供应商的设备手册。它方便，也危险：窗里那页在你站点的名下运行，如果对方页面被注入恶意脚本，损失可能波及你的用户。所以嵌入外部内容时的默认姿势是"关进沙箱"——用沙箱属性声明窗内页面被禁止的行为清单。

<!-- 嵌入厂内监控页：受信任来源，宽松策略 -->
<iframe
    src="monitor-line3.html"
    title="三号产线监控画面"
    width="480" height="270"
    loading="lazy">
</iframe>
<!-- title：读屏用户知道这扇窗里是什么，必写 -->
<!-- loading 懒加载：滚到附近才开始取内容，1.3 节加载流水线的减负手段 -->

<p>您的浏览器不支持内嵌框架，<a href="#monitor-fallback">点此查看监控文字状态</a>。</p>
<!-- 降级出口：窗打不开时给条活路 -->
​

<!-- 嵌入外部供应商手册：不受信任来源，关进沙箱 -->
<iframe
    src="vendor-manual.html"
    title="供应商设备手册（外部）"
    width="100%" height="600"
    sandbox="allow-same-origin"
    referrerpolicy="no-referrer">
</iframe>
<!-- sandbox：只放开最少必要的权限，脚本执行、表单提交、弹窗一律默认禁止 -->
<!-- referrer 策略：不把本站地址泄露给对方，减少被定向探测的风险 -->
​

两个代码块的态度差异就是嵌入安全的核心：厂内页面信任但不滥用，外部页面默认有罪、按最小权限放行。沙箱属性的值是一串权限开关，写得多松，风险就放大多少；第 5 章安全一节会把这套思路推广到整个页面级。

顺带一条工程直觉：内嵌框架是页面里最重的零件之一，一扇窗等于一整套独立的文档加载流水线。历史上有人用几十扇窗拼页面布局，那是性能灾难；今天它只该出现在"确实要显示另一个页面"的场景，布局的活儿留给 3.4 节的布局机械。

⚠️ 常见坑：视频不写宽高、框架不写标题。前者造成 1.3 节讲过的加载期跳动，后者让读屏用户听到"框架、框架、框架"三连而无从知晓内容。两个属性十秒钟就能写完，漏写的代价却不小。

💡 关键直觉：给多媒体配齐控件、备选、兜底、字幕四件套，就像给设备配齐防护罩、急停、警示灯、操作卡——单看每件都是小事，合起来才是"能上产线的设备"与"车间样品"的区别。

本节要点回顾

• 控件必开：媒体播放权永远在用户手里，自动出声是体验与政策的双重红线；
• 多格式备选：把格式选择权交给浏览器逐个尝试，比脚本探测型号可靠；
• 字幕三重价值：无障碍访问、静音观看、搜索引擎索引，一行结构全买到；
• 兜底不空：媒体与框架的标签内部都写降级文案，老设备也有活路；
• 嵌入沙箱：外部页面默认不可信，最小权限放行，本厂页面也不滥用；
• 重量意识：一扇内嵌窗就是一条完整加载流水线，布局不靠它拼。

多媒体与嵌入件归库，下一节结构班总装：语义化布局重排全区块，可访问性验收交出骨架成品。