多媒体与嵌入-CFANZ编程社区

多媒体与嵌入

一、概述

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

二、HTML中的图片

2.1图片标签

<img>标签用于放置图片

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

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

注意：像<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> 元素的内容.

三、视频和音频

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

3.1 `<video>`标签视频播放

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

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

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

提供多选择：

将 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>标签

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 文件如下:

四、嵌入技术

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>