2.3 图像与多媒体基础

2.3 图像与多媒体基础

图像嵌入技术

1. 基本图像标签

<img src="images/logo.png" 
     alt="公司Logo" 
     width="200" 
     height="100"
     loading="lazy">

关键属性解析：

• src：图像路径（必需）
• alt：替代文本（无障碍/图片无法显示时展示）
• width/height：显式设置防止布局偏移（CLS）
• loading：懒加载控制（lazy/eager）
• decoding：解码方式（async/sync/auto）

2. 响应式图像解决方案

srcset + sizes方案：

<img srcset="images/photo-320w.jpg 320w,
             images/photo-480w.jpg 480w,
             images/photo-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="images/photo-800w.jpg"
     alt="响应式图片示例">

picture元素高级适配：

<picture>
    <!-- AVIF格式（优先尝试） -->
    <source type="image/avif" 
            srcset="images/photo.avif">
    
    <!-- WebP格式（次选） -->
    <source type="image/webp"
            srcset="images/photo.webp">
    
    <!-- 传统JPEG回退 -->
    <img src="images/photo.jpg" 
         alt="高级格式适配图片">
</picture>

多媒体嵌入技术

1. 视频播放

基本视频嵌入：

<video controls 
       width="640" 
       height="360"
       poster="preview.jpg"
       preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
    您的浏览器不支持HTML5视频
</video>

高级视频配置：

<video id="main-video" controls>
    <source src="hls/main.m3u8" type="application/x-mpegURL">
    <!-- 自适应码率示例 -->
</video>

<script>
    // 使用Media Source Extensions API
    if('MediaSource' in window) {
        const mediaSource = new MediaSource();
        video.src = URL.createObjectURL(mediaSource);
    }
</script>

2. 音频播放

<audio controls 
       loop
       preload="none">
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持HTML5音频
</audio>

音频可视化扩展：

<canvas id="visualizer" width="300" height="80"></canvas>
<script>
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    // 添加音频分析器逻辑...
</script>

现代媒体技术

1. 画中画(PiP)模式

const video = document.getElementById('video');
video.addEventListener('click', async () => {
    try {
        if (video !== document.pictureInPictureElement) {
            await video.requestPictureInPicture();
        } else {
            await document.exitPictureInPicture();
        }
    } catch (error) {
        console.error('PiP error:', error);
    }
});

2. 媒体捕获API

<input type="file" accept="image/*" capture="environment">
<button id="record">录制视频</button>

<script>
    recordBtn.addEventListener('click', async () => {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: { width: 1280, height: 720 },
            audio: true
        });
        // 处理媒体流...
    });
</script>

性能优化策略

1. 媒体资源优化

2. 懒加载实现

<!-- 原生懒加载 -->
<img src="image.jpg" loading="lazy" alt="...">

<!-- 交叉观察器实现 -->
<img data-src="image.jpg" class="lazyload" alt="...">

<script>
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    document.querySelectorAll('.lazyload').forEach(img => observer.observe(img));
</script>

可访问性实践

1. 图像无障碍方案

<!-- 装饰性图片 -->
<img src="divider.png" alt="" aria-hidden="true">

<!-- 信息性图片 -->
<img src="chart.png" 
     alt="2023年销售趋势图：Q1 20%, Q2 35%, Q3 25%, Q4 20%"
     longdesc="#chart-desc">

<div id="chart-desc" class="visually-hidden">
    详细描述：2023年各季度销售比例分布情况...
</div>

2. 多媒体无障碍

<video controls aria-describedby="video-desc">
    <track default kind="captions" src="captions.vtt">
</video>

<div id="video-desc">
    本视频演示了HTML5多媒体技术的使用方式...
</div>

完整案例：媒体画廊实现

<div class="media-gallery">
    <figure>
        <picture>
            <source media="(min-width: 1200px)" srcset="large.jpg">
            <source media="(min-width: 800px)" srcset="medium.jpg">
            <img src="small.jpg" alt="画廊图片1" loading="lazy">
        </picture>
        <figcaption>图片描述 <button class="zoom-btn">放大</button></figcaption>
    </figure>

    <div class="video-container">
        <video controls preload="metadata" poster="video-preview.jpg">
            <source src="video.mp4" type="video/mp4">
            <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
        </video>
        <button class="pip-btn">画中画</button>
    </div>
</div>

<script>
    // 实现图片放大功能
    document.querySelectorAll('.zoom-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const img = btn.closest('figure').querySelector('img');
            openModal(img.src);
        });
    });

    // 画中画控制
    document.querySelector('.pip-btn').addEventListener('click', () => {
        const video = document.querySelector('video');
        video.requestPictureInPicture().catch(console.error);
    });
</script>

浏览器兼容性处理

// 检测视频格式支持
function canPlayVideoType(type) {
    const video = document.createElement('video');
    return !!video.canPlayType(type).replace('no', '');
}

// 回退方案
if (!canPlayVideoType('video/mp4')) {
    document.querySelector('video').innerHTML = `
        <object data="flash-player.swf" type="application/x-shockwave-flash">
            <param name="movie" value="flash-player.swf">
        </object>
    `;
}

通过合理运用这些图像与多媒体技术，开发者可以创建出内容丰富、体验优良的现代网页应用，同时兼顾性能表现与可访问性需求。