<source>-媒体源

<source> 标签是 HTML5 中专门为 <picture>、<audio> 和 <video> 元素设计的媒体源容器。它允许开发者根据不同的设备条件（如屏幕分辨率、带宽等）动态加载最优的媒体资源，从而提升用户体验和性能优化。

<source> 的基本语法

<source> 标签是一个空元素，不需要闭合标签。它通常作为 <picture>、<audio> 或 <video> 的子元素出现，并通过 src 和 type 属性指定资源路径和 MIME 类型。例如：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 视频。
</video>

与 <picture> 结合使用

<picture> 元素通过 <source> 实现响应式图片加载。根据 media 或 type 属性匹配条件，浏览器会选择最合适的资源：

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 800px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片示例">
</picture>

srcset 和 sizes 的高级用法

<source> 在 <picture> 中可结合 srcset 和 sizes 实现更精细控制：

<picture>
  <source 
    srcset="image-320w.jpg 320w, image-480w.jpg 480w"
    sizes="(max-width: 600px) 480px, 320px"
    type="image/jpeg">
  <img src="image-default.jpg" alt="动态分辨率图片">
</picture>

在 <audio> 和 <video> 中的应用

为兼容不同浏览器，通常提供多种格式的媒体文件：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

使用 media 属性优化视频加载

<video controls>
  <source src="high-res.mp4" type="video/mp4" media="(min-width: 800px)">
  <source src="low-res.mp4" type="video/mp4">
</video>

动态切换源的 JavaScript 示例

通过 JavaScript 可以动态修改 <source> 的 src 实现实时切换：

<video id="myVideo" controls>
  <source id="videoSource" src="default.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('myVideo');
  const source = document.getElementById('videoSource');
  
  function changeVideo(newSrc) {
    source.src = newSrc;
    video.load(); // 必须重新加载
  }
  
  // 调用示例
  changeVideo('new-video.webm');
</script>

性能优化与兼容性

预加载策略

通过 preload 属性结合 <source> 优化加载：

<video preload="metadata">
  <source src="preview.mp4" type="video/mp4">
</video>

兼容性处理

旧版浏览器可能忽略 <source>，因此建议在 <video> 或 <audio> 内添加备用内容：

<video controls>
  <source src="modern.mp4" type="video/mp4">
  <object data="legacy.swf" type="application/x-shockwave-flash">
    <param name="movie" value="legacy.swf">
  </object>
</video>

实际应用场景

艺术方向切换

根据屏幕方向显示不同裁剪比例的图片：

<picture>
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <img src="default.jpg" alt="方向自适应图片">
</picture>

带宽检测加载

通过 JavaScript 检测网络状态切换视频质量：

<video id="adaptiveVideo" controls>
  <source id="hdSource" src="hd.mp4" type="video/mp4">
  <source id="sdSource" src="sd.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('adaptiveVideo');
  const hdSource = document.getElementById('hdSource');
  const sdSource = document.getElementById('sdSource');
  
  function checkNetwork() {
    if (navigator.connection.effectiveType === '4g') {
      hdSource.src = 'hd.mp4';
    } else {
      hdSource.src = 'sd.mp4';
    }
    video.load();
  }
  
  navigator.connection.addEventListener('change', checkNetwork);
</script>

与其他 HTML5 API 的集成

与 Intersection Observer 的懒加载

<picture>
  <source data-srcset="lazy-image.jpg" media="(min-width: 800px)">
  <img data-src="lazy-small.jpg" class="lazyload" alt="懒加载图片">
</picture>

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