多媒体

HTML 教程 · 第 12 章 · 6 次浏览

HTML5 原生支持音频和视频，不需要 Flash 之类的插件。<video> 播放视频，<audio> 播放音频，浏览器自带控制条。

视频 video

<video src="movie.mp4" controls width="640">
    你的浏览器不支持视频标签。
</video>

video 常用属性

属性	作用
controls	显示播放控制条
autoplay	自动播放（现代浏览器要求静音才允许）
muted	默认静音
loop	循环播放
poster	封面图地址
preload	预加载策略：none/metadata/auto
width / height	显示尺寸

多格式兼容与 source

不同浏览器支持的视频格式不完全一样（Chrome/Edge/Firefox 支持 WebM 和 H.264，Safari 偏 H.264）。用 <source> 提供多个格式，浏览器会依次尝试：

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    你的浏览器不支持视频标签。
</video>

音频 audio

audio 的用法和 video 一致，去掉画面相关属性即可：

<audio controls>
    <source src="voice.mp3" type="audio/mpeg">
    <source src="voice.ogg" type="audio/ogg">
    你的浏览器不支持音频标签。
</audio>

iframe 嵌入外部内容

<iframe> 在页面里嵌入另一个网页：B 站视频、地图、其他网站的页面。常用属性：src（嵌入地址）、width/height、frameborder="0"（去边框）、allowfullscreen（允许全屏）、loading="lazy"（懒加载）。

<iframe src="https://player.bilibili.com/player.html?aid=123456" 
        width="640" height="360" allowfullscreen></iframe>

视频怎么自托管 vs 用平台

自己站点放视频：文件放自己服务器，标签直接引用。好处是可控、无广告，坏处是带宽成本高、加载慢。用平台（B 站、YouTube）嵌入：零带宽成本，但页面加载外部资源，可能拖慢速度，且内容受平台规则约束。内容站推荐前者做教程配图级的短视频，长视频用平台嵌入。

性能与可访问性

视频是页面体积大户：给 poster 封面、用 preload="metadata" 只加载元数据、<video> 内放"浏览器不支持"的提示文字、有字幕的加 <track> 字幕轨，这些细节决定视频在慢网络下的体验。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>多媒体示例</title>
</head>
<body>
    <h2>视频示例</h2>
    <video src="https://www.gdsxzx.com/media/demo.mp4" controls poster="poster.png" width="480" preload="metadata">
        你的浏览器不支持视频标签。
    </video>
    <h2>音频示例</h2>
    <audio controls preload="metadata">
        <source src="voice.mp3" type="audio/mpeg">
        你的浏览器不支持音频标签。
    </audio>
    <h2>嵌入地图</h2>
    <iframe src="https://map.example.com/embed?loc=beijing" width="480" height="300" frameborder="0" loading="lazy"></iframe>
</body>
</html>

📚 HTML 标签速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`<h1>-<h6>`	标题，h1 最高，每页只用一个 h1
`<p>`	段落，自动加前后间距
`<a href="">`	链接，href 是目标地址
`<img src="" alt="">`	图片，src 地址，alt 替代文字
`<ul> / <li>`	无序列表
`<ol> / <li>`	有序列表，数字编号
`<dl> / <dt> / <dd>`	自定义列表：术语 + 说明
`<table> / <tr> / <td> / <th>`	表格：行 / 单元格 / 表头
`<form action="" method="">`	表单，action 提交地址，method 提交方式
`<input type="">`	输入控件，type 有 text/password/email/number 等
`<textarea>`	多行文本输入
`<select> / <option>`	下拉框及选项
`<button type="submit">`	按钮，submit 提交表单
`<strong> / <em>`	加粗（重要）/ 斜体（强调）
`<div> / <span>`	区块容器 / 行内容器
`<header> <nav> <main>`	语义化：页眉 / 导航 / 主体
`<section> <article> <aside>`	语义化：分节 / 独立内容 / 侧栏
`<footer>`	页脚：版权、备案
`<video> / <audio>`	HTML5 视频 / 音频，加 controls 显示控制条
`<iframe src="">`	嵌入其他网页
`<!-- 注释 -->`	HTML 注释，不显示在页面
`<br> / <hr>`	换行 / 水平分割线
`<pre>`	保留空格和换行，原样显示
`<blockquote> / <q>`	块级引用 / 行内引用
`<figure> / <figcaption>`	图文组合及说明