HTML基础——多媒体标签

本文最后更新于：8 个月前

本文介绍img、picture、vedio、audio标签

HTML基础——多媒体标签

一、img图片标签

1.1、必要属性

属性 值 描述
src URL 规定显示图像的 URL
alt text 规定图像的替代文本，图片无法显示时，将显示这段文本
即使图片无法显示，用户依然可以根据文本知道图片信息；让屏幕阅读器可以获取图片信息

img标签中常用的一个全局属性——data-*，用来实现图片懒加载效果，做法是：在src中先填充一个占位图片的链接，把真正的图片链接放到data-src中，后续在脚本中用data-src代替初始的src。示例如下：

1
2
3
4
5
6
7
8
9
10
11
<body>
    <img src=“loading-image.png” data-src="real-imgae.png">
    <script>
        let image = document.querySelector('img')
        function inViewShow(){
            if(image快要出现在可视范围了){
                image.src = image.dataset.src
            }
        }
    </script>
</body>

1.2、可选属性

属性 值 描述
loading eager，立即加载
lazy，延迟加载		 规定浏览器是应该立即加载图像还是推迟加载屏幕外图像。
请仅将 loading="lazy" 添加到位于首屏下方的图像
height 定义图像的高度。
width 设置图像的宽度。

loading示例：

1
2
3
4
5
6
<img src="/i/photo/beijing.jpg" alt="北京" style="width:100%">
<img src="/i/photo/shanghai.jpg" alt="上海" style="width:100%">

<!-- 屏幕外的图像 -->
<img src="/i/photo/wuhan.jpg" alt="武汉" style="width:100%" loading="lazy">
<img src="/i/photo/shanghai-1.jpg" alt="上海" style="width:100%" loading="lazy">

经过实践测试，发现loading这个属性在Edge浏览器上似乎并不起作用，所以不建议使用

1.3、object-fit图片缩放

object-fit属性指定<img>和<vedio>的内容应该如何适应高度和宽度指定的框。演示链接：object-fit - CSS：层叠样式表 | MDN (mozilla.org)

1
2
3
4
5
object-fit: contain;		/* 等比放大，直到内容的宽或高两者之一，达到标签的指定宽度、高度，内容可能被裁剪 */
object-fit: cover;			/* 等比放大，直到内容的宽和高都达到标签的指定高度，内容可能被裁剪*/
object-fit: fill;			/* 不等比例放大，使内容的宽和高都达到标签的宽高 */
object-fit: none;			/* 不放大 */
object-fit: scale-down;		/* 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些 */

1.4、object-position内容位置

object-position属性指定对象在内容框中的放置位置，演示链接：object-position - CSS：层叠样式表 | MDN (mozilla.org)

1
2
3
4
5
/* 语法 */
object-fit: X轴位置  Y轴位置;

/* 取值范围 */
object-fit: percentage | px | left(top) | center | right(bottom) |

二、vedio视频标签(H5)

HTML5 新增标签

1
2
3
4
5
6
7
8
9
10
11
<video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">

    <!--下面的内容将在浏览器不支持video标签时显示-->
    Download the
    <a href="/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="/media/cc0-videos/flower.mp4">MP4</a>
    video.
</video>

浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在<source>元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

在不支持 video 元素的浏览器中，<video></video> 标签中间的内容会显示

属性 值 描述
src url 要播放的视频的 URL
autoplay 如果出现该属性，则视频在就绪后马上播放
controls 如果出现该属性，则向用户显示控件，比如播放按钮
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放
muted 规定视频的音频输出应该被静音
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性
height/width px 设置视频播放器的高度/宽度

更多细节（如事件）请查看：video: 视频嵌入元素 - HTML | MDN (mozilla.org)

三、audio音频标签(H5)

HTML5 新增标签

1
2
3
<audio src="someaudio.wav">
	您的浏览器不支持 audio 标签。	<!--浏览器不支持audio标签时，将显示这段文本-->
</audio>
属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src url 要播放的音频的 URL。
可以在 audio 元素中使用<source>元素来替代该属性指定嵌入的音频

更多细节（如事件）请查看：audio - HTML | MDN (mozilla.org)

四、source资源标签

该元素为<picture>、<audio>、<vedio>元素指定多个媒体资源。浏览器根据它对媒体类型或者编解码器的支持进行选择（第一个受支持的资源）

这是一个空元素

1
2
3
4
5
6
7
8
9
10
11
<video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

<!--具有两个源文件和备用图像的 <picture> 元素-->
<picture>
  <source media="(max-width:600px)" srcset="tulip-yellow.jpg">
  <source media="(min-width:600px)" srcset="tulip-red.jpg">
  <img src="tulip.jpg" alt="Flowers" style="width:auto;">
</picture>
属性 值 描述
media media query 规定媒体资源的类型。
src url 规定媒体文件的 URL。
srcset url 规定要在不同情况下使用的图像的 URL。
type numeric value 规定媒体资源的 MIME 类型。

五、picture标签

响应式图片，根据媒体查询条件、当前设备情况，来自动决定使用不同的资源文件。

<picture> 元素包含两个标签：一个或多个 <source> 标签和一个 <img> 标签。

浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source> 元素，然后显示正确的图像（在 srcset 属性中指定）。 <img> 元素是 <picture> 元素的最后一个子元素，如果没有 source 标签匹配，则作为后备选项。

1
2
3
4
5
<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="图片说明文字">
</picture>

要决定加载哪个 URL，user agent 检查每个 <source> 的 srcset、media 和 type 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

  • media属性

    从上到下匹配source元素的media条件，如果当前匹配结果为false，那么这个source元素被跳过

  • type属性

    指定资源的MIME类型，如果浏览器不支持该类型，那么这个source元素被跳过

HTML > HTML基础
HTML基础——多媒体标签
http://timegogo.top/2022/11/04/HTML/HTML基础——多媒体标签/
作者
丘智聪
发布于
2022年11月4日
更新于
2023年7月16日
许可协议