多媒体与嵌入

HTML 中的图片

img

<img
  src="图片位置"
  alt="图片描述"
  width="图片宽度"
  height="图片高度"
  title="图片标题"
/>

热链接：就是你引入别人网站上的图片，不道德而且不能保证图片的显示

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  title="这是一个恐龙"
  width="200"
  height="171"
/>

为什么要设置宽高？因为图片加载需要时间，如果图片过大，页面会先显示空白，用户体验不好，所以设置宽高可以避免这个问题。而且当图片未加载时，可以显示一个占位符，用户体验更好。

版权所有

原创作品是有版权的，如果想要使用有下列操作之一：

  • 从版权持有人获得明确的书面许可
  • 支付许可费用。可以是一次性费用，或者可能是 按照时间段、地理区域、行业或媒体类型等特定费用的权利管理方式
  • 仅将使用限制在你所在司法辖区中被视为 合理使用或合理交易的用途

自由许可

MIT、BSD或者适当的知识共享（CC）许可

  • 提供指向图像原始来源的链接，并标明创作者。
  • 指示是否对其进行了任何更改。
  • 使用相同许可证分享使用该图像创建的任何派生作品。
  • 不分享任何派生作品。
  • 不将该图像用于任何商业作品。
  • 在使用该图像的任何发布中包含许可证的副本。

公共领域/CCO

公共领域是指版权法不再限制作品使用的状态。这通常是因为作品已经过期，或者版权持有人明确放弃版权。CC0（Creative Commons Zero）是一种特殊的许可，它明确放弃版权，使作品进入公共领域。

通过为图片搭配说明文字的方式来解说图片

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341"
  />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

网页上的其他图形

  • canvas
  • svg
  • webgl
  • HTML 音频和视频
  • WebRTC

视频和音频内容

video

<video src="rabbit320.webm" controls>
  <p>
    你的浏览器不支持 HTML 视频。可点击<a href="rabbit320.mp4">此链接</a>观看。
  </p>
</video>
  • src：视频的 URL
  • controls：显示播放控件
  • autoplay：自动播放
  • muted：静音
  • loop：循环播放
  • preload：预加载视频有三个值，分别为 none（不缓冲）、auto（页面加载后缓冲媒体文件）、metadata（仅缓冲文件的元数据）
  • poster：视频加载时显示的图像

元素内的内容是当浏览器不支持 video 元素时显示的备用内容。

完整的 video 元素示例：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

audio

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

显示视频文本

使用 WebVTT 文件和<track>元素即可。

格式如下：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="subtitles_sv.vtt" srclang="sv" label="Svenska" />
  <p>你的浏览器不支持此视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • subtitles：字幕
  • capsions：旁白
  • descriptions：描述
  • chapters：章节
  • metadata：元数据

WebVTT 文件格式如下：

WEBVTT

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

…

iframe

还有其他的嵌入方式 object、embed、applet，但是不推荐使用。

iframe 元素会创建包含另一个文档的内联框架（即行内框架）。你可以将其视为在您的网页中嵌入另一个网页。

<head>
  <style>
    iframe {
      border: none;
    }
  </style>
</head>
<body>
  <iframe
    src="https://developer.mozilla.org/zh-CN/docs/Glossary"
    width="100%"
    height="500"
    allowfullscreen
    sandbox
  >
    <p>
      <a href="/zh-CN/docs/Glossary">
        为不支持 iframe 的浏览器预留的后备链接
      </a>
    </p>
  </iframe>
</body>

以上代码会出现错误

Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X-Frame-Options' to 'deny'.

这是因为安全性的问题

基本 API

  • border:none 边框
  • allowfullscreen 允许全屏
  • src 源
  • width 宽度
  • height 高度
  • sandbox 禁止某些行为
  • frameborder 边框宽度

配置 CSP 指令

全称内容安全策略，可以通过配置来防止其他网站在其网页中嵌入你的内容。

向 web 中添加矢量图形

什么事矢量图形？

  • 位图 位图使用像素网格来定义---位图文件精确包含每个像素的位置和他的色彩信息。Bitmap(.bmp)、PNG(.png)、JPEG(.jpg)、GIF(.gif)

  • 矢量图 矢量图使用算法来定义---矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出它们在屏幕上的显示效果。SVG(.svg)、AI(.ai)、EPS(.eps)

响应式图片

为什么使用？

因为在不同设备中，图片的显示效果和大小是不一样的，大的设备上可能当前图片比较合适，但是在小的设备上就会出现展示不全的问题。

如何创建响应式图片

分辨率切换：不同的尺寸

  • srcset
  • sizes
<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"
/>

srcset:

  • 一个文件名（elva-fairy-480w.jpg）
  • 一个空格
  • 图片的固有宽度（以像素为单位）（480w）。注意这里的 w 是单位，不是 px。是图片自身的元素宽度。

sizes：

  • 一个媒体条件（max-width：600px）
  • 一个空格
  • 当媒体条件为真时，图像将填充的插槽的宽度（480px）

**注意：**在使用当前的代码时，需要<meta name="viewport" content="width=device-width">,这行代码的作用是强制让手机浏览器采用它们真是可视窗口的宽度来加载网页。

分辨率切换：相同的尺寸，不同的分辨率

示例

可以通过调整电脑的分辨率来查看效果。

<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"
/>

picture

主要解决了不同设备显示不同尺寸的问题。

示例

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

当最大宽度小于或等于799px时会显示elva-480w-close-portrait.jpg，当最大宽度大于800px时会显示elva-800w.jpg。

为什么不用css或js来实现

当浏览器开始加载页面时，他会在主解析器开始加载和解释页面的css和js之前预先下载所有图像。这种机制有助于减少页面加载时间。但对于响应式图像并没有用。毕竟你不能先加载大图，然后再运行js发现需要改变图像大小再去替换。

最后更新:
贡献者: qiuyulc