跳到主要内容

HTML 多媒体

网页可以通过 <img>、<audio>、<video> 和 <iframe> 等元素嵌入各种媒体内容。

图片 img​

基本用法​

<img src="image.jpg" alt="图片描述">

重要属性​

属性说明
src图片路径/URL
alt图片描述（必填，用于可访问性）
width图片宽度
height图片高度
loading加载策略 (lazy/eager)
srcset多分辨率图片源
sizes图片尺寸说明

alt 属性​

<!-- 有意义的描述 -->
<img src="cat.jpg" alt="一只橘色的猫在阳光下睡觉">

<!-- 如果图片是装饰性的，可以留空 -->
<img src="decoration.svg" alt="">

<!-- 纯信息图片 -->
<img src="chart.png" alt="2024年销售增长图表，显示同比增长30%">

响应式图片​

<!-- 使用 srcset 提供多个分辨率 -->
<img src="small.jpg" 
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="响应式图片">

<!-- 切换不同格式的图片 -->
<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="图片描述">
</picture>

常用图片格式​

格式特点适用场景
JPEG有损压缩，体积小照片、复杂图像
PNG无损压缩，支持透明图标、logo、需要透明的图
GIF动图，最多256色简单动画
WebP体积小，压缩率高现代浏览器（推荐）
SVG矢量图，代码绘制图标、logo、图表
AVIF最新格式，压缩率最高现代浏览器

SVG 图片​

<!-- 内联SVG -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#3498db"/>
    <text x="50" y="55" text-anchor="middle" fill="white">Hello</text>
</svg>

<!-- 外部SVG文件 -->
<img src="icon.svg" alt="图标">

图片链接​

<!-- 图片作为链接 -->
<a href="https://example.com">
    <img src="button.jpg" alt="点击进入">
</a>

<!-- 图片映射（已不推荐，使用CSS更好） -->
<map name="image-map">
    <area shape="rect" coords="0,0,100,100" href="page1.html" alt="区域1">
    <area shape="circle" coords="150,50,30" href="page2.html" alt="区域2">
</map>
<img src="map-image.jpg" usemap="#image-map">

音频 audio​

基本用法​

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 audio 元素。
</audio>

属性​

属性说明值
controls显示播放控件-
autoplay自动播放-
loop循环播放-
muted默认静音-
preload预加载策略auto/metadata/none
src音频源URL

完整示例​

<!-- 自动播放，静音，循环 -->
<audio src="background.mp3" autoplay loop muted preload="auto">
</audio>

<!-- 带控件的播放器 -->
<audio id="myAudio" controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.wav" type="audio/wav">
</audio>

<!-- JavaScript控制 -->
<script>
    const audio = document.getElementById('myAudio');
    audio.play();      // 播放
    audio.pause();     // 暂停
    audio.volume = 0.5; // 音量（0-1）
</script>

视频 video​

基本用法​

<video width="640" height="480" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持 video 元素。
</video>

属性​

属性说明值
controls显示播放控件-
autoplay自动播放-
loop循环播放-
muted默认静音-
poster封面图片URL
preload预加载策略auto/metadata/none
width/height尺寸像素值
playsinline内联播放（移动端）-

带封面和字幕​

<video controls width="640" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles.vtt" srclang="zh" label="中文" default>
    <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English">
    您的浏览器不支持 video 元素。
</video>

VTT 字幕文件格式​

WEBVTT

00:00:01.000 --> 00:00:04.000
欢迎来到编程学习网站

00:00:05.000 --> 00:00:08.000
本节课程介绍HTML多媒体元素

00:00:09.000 --> 00:00:12.000
包括图片、音频和视频

视频背景​

<!-- 全屏视频背景（常见于着陆页） -->
<video autoplay muted loop playsinline id="bg-video">
    <source src="background.mp4" type="video/mp4">
</video>

<div class="content">
    <h1>欢迎访问</h1>
    <p>网页内容...</p>
</div>

<style>
    #bg-video {
        position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: -1;
    }
    .content {
        position: relative;
        z-index: 1;
        color: white;
        text-align: center;
        padding: 100px 20px;
    }
</style>

iframe 嵌入​

嵌入网页​

<iframe src="https://example.com" 
        width="600" 
        height="400"
        title="嵌入的网页"
        allowfullscreen>
</iframe>

属性​

属性说明
src嵌入页面URL
width/height尺寸
allowfullscreen允许全屏
loading加载策略 (lazy/eager)
title说明（可访问性必需）
srcdoc内联HTML内容

嵌入YouTube视频​

<!-- YouTube分享嵌入代码 -->
<iframe width="560" height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen>
</iframe>

嵌入PDF​

<!-- 使用embed元素 -->
<embed src="document.pdf" type="application/pdf" width="600" height="500">

<!-- 使用iframe -->
<iframe src="document.pdf" width="600" height="500"></iframe>

<!-- 使用object元素 -->
<object data="document.pdf" type="application/pdf" width="600" height="500">
    <p>您的浏览器不支持PDF预览，<a href="document.pdf">点击下载</a></p>
</object>

srcdoc 内联内容​

<!-- 直接在iframe中显示HTML内容 -->
<iframe srcdoc="<h1>Hello World</h1><p>这是一个内联HTML内容</p>" 
        width="300" height="100">
</iframe>

沙盒安全​

<!-- 限制iframe功能 -->
<iframe src="untrusted-page.html" sandbox>
    <!-- 禁止脚本执行、表单提交、弹出窗口等 -->
</iframe>

<!-- 部分允许 -->
<iframe src="content.html" 
        sandbox="allow-scripts allow-same-origin">
    <!-- 允许脚本和同源请求 -->
</iframe>

Canvas 画布​

Canvas 用于绘制图形和动画：

<canvas id="myCanvas" width="400" height="200">
    您的浏览器不支持canvas元素。
</canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // 绘制矩形
    ctx.fillStyle = '#3498db';
    ctx.fillRect(50, 50, 150, 100);
    
    // 绘制圆形
    ctx.beginPath();
    ctx.arc(300, 100, 50, 0, Math.PI * 2);
    ctx.fillStyle = '#e74c3c';
    ctx.fill();
    
    // 绘制文字
    ctx.font = '20px Arial';
    ctx.fillStyle = '#333';
    ctx.fillText('Canvas 示例', 130, 180);
</script>

SVG 矢量图形​

基本SVG​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <!-- 矩形 -->
    <rect x="10" y="10" width="100" height="60" 
          fill="#3498db" stroke="#2980b9" stroke-width="2"/>
    
    <!-- 圆形 -->
    <circle cx="200" cy="50" r="30" fill="#e74c3c"/>
    
    <!-- 直线 -->
    <line x1="10" y1="100" x2="120" y2="100" 
          stroke="#2ecc71" stroke-width="3"/>
    
    <!-- 文本 -->
    <text x="150" y="130" font-family="Arial" font-size="14" fill="#333">
        SVG 示例
    </text>
</svg>

SVG 动画​

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50" fill="#3498db">
        <animate attributeName="x" 
                 from="0" to="150" 
                 dur="2s" 
                 repeatCount="indefinite"/>
    </rect>
</svg>

响应式多媒体​

图片响应式​

/* 让图片自适应容器 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

视频响应式​

/* 保持宽高比 */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    height: 0;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="video-container">
    <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
            frameborder="0" 
            allowfullscreen>
    </iframe>
</div>

使用 picture 元素​

<picture>
    <!-- 移动端使用小图 -->
    <source media="(max-width: 600px)" 
            srcset="image-small.jpg 1x, image-small-2x.jpg 2x">
    
    <!-- 大屏幕使用大图 -->
    <source media="(min-width: 601px)" 
            srcset="image-large.jpg 1x, image-large-2x.jpg 2x">
    
    <!-- 默认图片 -->
    <img src="image-medium.jpg" alt="响应式图片">
</picture>

可访问性​

图片 alt 文本​

<!-- 信息图片：提供详细描述 -->
<img src="chart.png" alt="2024年各季度销售额柱状图，Q1:100万, Q2:150万, Q3:180万, Q4:200万">

<!-- 功能图片：描述链接目的 -->
<a href="/home"><img src="home-icon.svg" alt="返回首页"></a>

<!-- 装饰图片：留空 -->
<img src="decoration.svg" alt="">

视频字幕​

<video>
    <track kind="captions" src="captions.vtt" srclang="zh" default>
</video>

音视频控制​

<!-- 确保所有用户都能使用媒体控制 -->
<audio controls>
    <source src="audio.mp3">
</audio>

<video controls>
    <source src="video.mp4">
</video>

性能优化​

延迟加载​

<!-- 图片延迟加载 -->
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="...">

<!-- iframe延迟加载 -->
<iframe src="content.html" loading="lazy"></iframe>

预加载关键资源​

<head>
    <!-- 预加载关键图片 -->
    <link rel="preload" href="hero-image.jpg" as="image">
    
    <!-- 预加载关键字体 -->
    <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>

响应式图片最佳实践​

<picture>
    <!-- AVIF格式（最新，压缩最好） -->
    <source type="image/avif" srcset="img-400.avif 400w, img-800.avif 800w">
    
    <!-- WebP格式（兼容性更好） -->
    <source type="image/webp" srcset="img-400.webp 400w, img-800.webp 800w">
    
    <!-- JPEG兜底 -->
    <img src="img-800.jpg" 
         srcset="img-400.jpg 400w, img-800.jpg 800w"
         sizes="(max-width: 600px) 100vw, 50vw"
         alt="描述"
         loading="lazy">
</picture>

小结​

本章学习了：

  1. 图片 img：基本属性、响应式、格式选择
  2. 音频 audio：播放器、属性、格式
  3. 视频 video：播放器、字幕、背景视频
  4. iframe：嵌入网页、视频、PDF
  5. Canvas：绑定绘制
  6. SVG：矢量图形和动画
  7. 响应式：让媒体适应不同设备
  8. 可访问性和性能优化

练习​

  1. 创建一个带封面图和字幕的视频播放器
  2. 使用 <picture> 元素实现响应式图片
  3. 嵌入一个YouTube视频并保持16:9比例
  4. 使用SVG绘制一个简单的图标
  5. 实现图片延迟加载