主要分为矢量图(如SVG格式,编码方式存储,占用空间小,且伸缩不失真)和位图(如jpg格式)两种。
由于图片的压缩形式不同,不同格式的图片的大小也不同,jpg、bmp格式的图片要比png改格式的体积大。
例如:
1
123
4ImagesinHTML
910(1)替代文字(alt)
我们将看到的下一个属性是alt。它的值应该是图像的文本描述,用于无法查看/显示图像的情况。例如,我们上面的代码可以像这样修改:
1
可以使用width和height属性指定图像的宽度和高度。您可以通过多种方式找到图像的宽度和高度。例如,在Mac上,您可以使用Cmd+I来显示图像文件的信息。回到我们的例子,我们可以这样做:
1
1
说到字幕,可以通过多种方式添加标题以与图像一起使用。例如,没有什么可以阻止你这样做:
123
4AT-RexondisplayintheManchesterUniversityMuseum.
17图形不一定是图像。它是一个独立的内容单元:
一个数字可以是几个图像,代码片段,音频,视频,方程式,表格或其他东西。
总结:如果图像具有含义,就您的内容而言,您应该使用HTML图像。如果图像纯粹是装饰,则应使用CSS背景图像。
举例说明:
举例(创建图像映射):
必需的属性
可选的属性
全局属性
事件属性
(1)
如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用"autoplay",则忽略该属性。
举例:
这称为后备内容-如果访问该页面的浏览器不支持该
嵌入的视频看起来像这样:
(2)支持多种格式
以上示例存在问题,如果您尝试使用Safari或InternetExplorer等浏览器访问上面的实时链接,则可能已经注意到了这一问题。该视频无法播放!这是因为不同的浏览器支持不同的视频(和音频)格式。
让我们快速浏览一下术语。MP3,MP4和WebM等格式称为容器格式。它们包含构成整首歌曲或视频的不同部分-例如音频轨道,视频轨道(在视频的情况下),以及描述所呈现媒体的元数据。
音频和视频轨道也采用不同的格式,例如:
WebM容器通常将OggVorbis音频与VP8/VP9视频打包在一起。主要在Firefox和Chrome中支持此功能。
MP4容器通常使用H.264视频打包AAC或MP3音频。这主要在InternetExplorer和Safari中受支持。
较旧的Ogg容器倾向于使用OggVorbis音频和OggTheora视频。这主要在Firefox和Chrome中得到支持,但基本上已被更优质的WebM格式所取代。
音频播放器将倾向于直接播放音轨,例如MP3或Ogg文件。这些不需要容器。
注意:从我们的音频-视频编解码器兼容性表中可以看出,它并不那么简单。此外,许多移动平台浏览器可以通过将其交给底层系统的媒体播放器来播放不受支持的格式。但是现在这样做。
存在上述格式以将视频和音频压缩成可管理的文件(原始视频和音频非常大)。浏览器包含不同的编解码器,如Vorbis或H.264,用于将压缩的声音和视频转换为二进制数字并返回。如上所述,遗憾的是浏览器并不都支持相同的编解码器,因此您必须为每个媒体制作提供多个文件。如果你错过了解码媒体的正确编解码器,它将无法播放。
注意:您可能想知道为什么会出现这种情况。MP3(用于音频)和MP4/H.264(用于视频)都得到广泛支持,并且质量很好。然而,他们也受到专利保护-美国专利至少涵盖了2017年的MP3,直到2027年的H.264,这意味着没有专利的浏览器必须支付巨额资金来支持这些格式。此外,许多人原则上避免使用受限软件,而采用开放格式。这就是我们必须为不同浏览器提供多种格式的原因。
(3)
该
属性:
如果出现该属性,则音频在页面加载时进行加载,并预备播放。
有一些小的差异概述如下,一个典型的例子可能如下:
输出结果:
这比视频播放器占用的空间更少,因为没有可视组件-您只需要显示控件来播放音频。与HTML5视频的其他不同之处如下:
该
(4)重新启动媒体播放
varmediaElem=document.getElementById("my-media-element");mediaElem.load();(5)检测轨道的添加和删除
现在我们将讨论一个稍微更高级的概念,这个概念对于了解非常有用。许多人不能或不想听到他们在网上找到的音频/视频内容,至少在某些时候。例如:
典型的WebVTT文件如下所示:
WEBVTT100:00:22.230-->00:00:24.606Thisisthefirstsubtitle.200:00:30.739-->00:00:34.074Thisisthesecond....