跳到主要内容

html 多媒体标签

图片​

img element​

语法格式​
  • src：图片 url；
  • alt：图片描述信息；
<a href="https://developer.mozilla.org">
  <img
    src="favicon144.png"
    alt="Visit the MDN site"
    width="100px"
    height="100px"
  />
</a>
响应式图片​
  • 根据屏幕像素比选择不同分辨率的图片；
    • srcset：url + ddr；
  • 根据设备屏幕宽度选择不同分辨率图片；
    • srcset：url + 图片固有宽度；
    • sizes：设置对应媒体查询；
<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy"
/>

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

picture element​

语法格式​
  • 嵌套 img> 标签和多个 <picture 标签；
  • 浏览器不支持 picture> 显示 <img 标签；
  • 常用于响应式图片；
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>
响应式图片​
  • 根据屏幕像素比选择不同分辨率的图片；
    • srcset：url + ddr；
  • 根据设备屏幕宽度选择不同分辨率图片；
    • srcset：url + 图片固有宽度；
    • sizes：设置对应媒体查询；
  • 根据图片类型选择虚着呢图片；
    • type：设置对应 MIME 类型；
  • 根据媒体查询选择图片；
    • media 设置媒体查询；
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 1000px)" />
  <source srcset="mdn-logo.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

<picture>
  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
  <img src="logo-320.png" alt="logo" />
</picture>

<picture>
  <source srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" />
  <img src="logo-320.png" alt="logo" />
</picture>

figure element​

  • 嵌套 img> 和 <figcaption 标签；
  • figcaption 标签作为图片标题；
<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

音频和视频​

audio element​

  • 音频标签；
  • 内部使用 p 标签用于音频无法播放的情境下作为 feedback；
  • src：表示音频 URL；
  • control：表示是否启用自带控制组件；
  • autoplay：表示是否自动播放；
  • loop：是否默认循环播放；
  • muted：表示是否默认静音；
  • preload：表示是否默认缓冲；
<audio src="AudioTest.ogg" controls autoplay loop muted preload>
  <p>Your browser does not support the <code>audio</code> element.</p>
</audio>

video element​

  • 视频标签；
  • 内部使用 p 标签用于音频无法播放的情境下作为 feedback；
  • src：表示音频 URL；
  • control：表示是否启用自带控制组件；
  • autoplay：表示是否自动播放；
  • loop：是否默认循环播放；
  • muted：表示是否默认静音；
  • preload：表示是否默认缓冲；
  • poster：表示视频封面 URL；
<video
  src="myVideo.mp4"
  width="100px"
  height="100px"
  controls
  autoplay
  loop
  muted
  preload
  poster="poster.mp4"
>
  <p>Your browser does not support the <code>video</code> element.</p>
</video>

响应式多媒体​

  • source> 标签嵌套于 audio 和 <video 标签内部，用于响应式多媒体；
  • 具体使用参照 picture 标签响应式图片；
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  <p>I'm sorry; your browser doesn't support HTML5 video.</p>
</video>

track element​

语法格式​
  • 字幕标签，内嵌于 audio> 和 <video 标签；
  • 通过使用多个 track 标签表示多个字幕；
  • default：表示默认字幕；
  • src：表示字幕 URL；
  • label：表示字幕用户界面显示文字；
  • srclang：表示字幕语言类型，kind 属性为 subtitles 必须使用；
  • kind：表示字幕类型；
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track default kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
</video>
kind 属性值详解​
  • subtitles：表示用于非母语人群的字幕，默认值；
  • caption：表示用于母语人群的字幕，一般用于听障人士或静音场合。
  • descriptions：表示场景描述的字幕
  • chapters：表示电影章节的字幕；
  • metadata：表示电影元数据的字幕，不可见。