多媒体与嵌入

多媒体与嵌入

本文所有内容来自于MDN，学习笔记

一、概述

本模块要探索怎样用HTML来让你的网页包含多媒体，包括可以包含图像的不同方式，以及怎样嵌入视频，甚至是整个其他的网页。

二、HTML中的图片

2.1图片标签

<img>标签用于放置图片

<img src="images/dinosaur.jpg">//相对路径
<img src="https://www.example.com/images/dinosaur.jpg">         //绝对路径

注意：最好给图片取一个描述性的文件名

**警告：**大多数图片是有版权的。不要在你的网页上使用一张图片，除非：

1. 你是图片版权所有者
2. 你有图片版权所有者明确的、书面上的使用授权
3. 你有充分的证据证明这张图片是公共领域内的

侵犯版权是违法并且不道德的。此外，在得到授权之前永远不要把你的src属性指向其他人网站上的图片。这被称为"盗链（hotlinking）"。同样，盗取其他人的带宽也是违法的。而且这会降低你的页面的加载速度，而且图片可能会在不受你控制的情况下被移走或用别的令人尴尬的东西替换掉。

注意：像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。

2.2属性

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

alt: //它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况

width:宽

height:高

title:图片标题，鼠标悬停在图片上会显示

2.3 为图片搭配说明文字

html5中的<figure>和<figcaption>元素

为图片提供一个语义容器，在标题和图片之间建立清晰的关联

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

这个<figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了<figure> 元素的内容.

<figure>里可以是几张图片、一段代码、音视频、方程、表格或别的。

如果图像对您的内容里有意义，则应使用HTML图像。 如果图像纯粹是装饰，则应使用CSS背景图片

三、视频和音频

何在一个网页中嵌入音频和视频，以及如何为视频添加字幕

3.1 <video>标签视频播放

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

controls:用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

<video> 标签内的内容:
这个叫做后备内容 — 当浏览器不支持<video>标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

要使你的媒体文件在不同平台，不同设备的浏览器上都可观看，这需要多种编码器组合使用，但是这是一种非常麻烦的事，所以可以参考Choosing the right container in Media container formats (file types)来选择最适合的容器格式，同样的，参考Choosing a video codec in Web video codec guide和Choosing an audio codec in Web audio codec guide选择编码格式

提供多选择：

将 src 属性从 <video> 标签中移除，转而将它放在几个单独的标签<source> 当中

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

autoplay:自动播放，不建议用。

loop:循环播放，不建议用，除非有必要。

muted:默认关闭声音。

poster:这个属性指向了一个图像的URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload:这个属性被用来缓冲较大的文件，有3个值可选：

• "none" ：不缓冲
• "auto" ：页面加载后缓存媒体文件
• "metadata" ：仅缓冲文件的元数据

3.2<audio>标签音频播放

与<video>标签使用方法几乎完全相同

差异如下：

​ 不支持width/height和poster,没有视觉部件

• 重新播放媒体采用js

const mediaElem = document.getElementById("my-media-element");
mediaElem.load();

• 音轨增删事件：

const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
  audioTrackAdded(event.track);
}

• 显示音频文本

HTML5中<video>有了WebVTT格式，可以使用<track>标签

1. 以 .vtt 后缀名保存文件。
2. 用<track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后，使用 srclang来告诉浏览器你是用什么语言来编写的 subtitles。

subtitles:通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。

captions:同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。

timed descriptions:将文字转换为音频，用于服务那些有视觉障碍的人。

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

这串代码会显示一段带有字幕的视频

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MbSNVArh-1644158034460)(…/…/AppData/Roaming/Typora/typora-user-images/image-20220206212637990.png)]

一个典型的 WebVTT 文件如下:

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

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

四、嵌入技术

4.1<iframe>元素

将其他web页面嵌入到当前页面

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

allowfullscreen：可以通过全屏API设置为全屏模式

frameborder: 如果设置为1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0删除边框。不推荐这样设置，因为在CSS中可以更好地实现相同的效果。border: none;

更安全的做法：始终使用sandbox(对框架中的内容应用额外的限制。该属性的值可以为空以应用所有限制，或者以空格分隔的标记以解除特定限制)具体用法

4.2 <embed>和<object>元素

不常用，因为有更先进的技术。除非用于内部网或者企业项目

这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！

注意：插件是一种对浏览器原生无法读取的内容提供访问权限的软件。

五、为web增加向量图

5.1位图和矢量图

• 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
• 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形

5.2 SVG是什么？

通俗的讲就是用代码画图

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

这段代码画了一个蓝色的圆在一个黑色的矩形中间

为了创建SVG图像，大多数使用矢量图形编辑器，如Inkscape 或 Illustrator

5.3 将SVG添加到页面

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

六、创建自适应图片

6.1分辨率切换：不同的尺寸

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示

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

6.2 相同尺寸，不同分辨率

<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 {
  width: 320px;
}

6.3 <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>