盘点前端你不知道的多媒体资源展方式~~

小肚肚肚肚肚哦
182 阅读14分钟

本文来总结一下，前端页面都有哪些展示多媒体资料的方式。

img 标签

<img 
  srcset="image-small.jpg 600w, image-medium.jpg 1000w, image-large.jpg 2000w" 
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px" 
  src="image-default.jpg" 
  alt="Responsive image"
  loading="lazy"
>

  • 资源路径：可以直接定义 src，也可以通过 js 动态创建 img 和 src，src 可以是图片路径（jpg/png/gif/webp等）或者是 base64。

  • srcset: 提供不同分辨率或尺寸的图片文件，浏览器根据当前视口尺寸或屏幕分辨率自动选择最合适的图片。

  • sizes: 定义不同屏幕尺寸下使用的图片尺寸。

配合的 css 属性有 object-fit、object-position、opacity、aspect-ratio、backdrop-filter、filter、clip-path。

好的，以下是这些 CSS 属性的表格总结：

属性名称作用描述常用值示例
object-fit控制可替换元素（如 <img>、<video>）的内容如何适应其容器。fill、contain、cover、none、scale-downobject-fit: cover;
object-position定义可替换元素的内容在容器内的位置。50% 50%、top、right、bottom、left、x% y%object-position: top center;
opacity设置元素的透明度。0（完全透明）到 1（完全不透明），支持小数（如 0.5）opacity: 0.5;
aspect-ratio设置元素的宽高比，确保元素在不同尺寸下保持固定的比例。1 / 1、16 / 9、4 / 3aspect-ratio: 16 / 9;
backdrop-filter对元素的背景应用图形效果（如模糊、颜色调整等），不影响元素内容。blur(10px)、brightness(50%)、contrast(200%)backdrop-filter: blur(10px);
filter对元素的内容应用图形效果（如模糊、颜色调整等）。blur(10px)、brightness(50%)、contrast(200%)、grayscale(100%)filter: grayscale(100%);
clip-path定义元素的裁剪路径，将元素裁剪为特定的形状。circle(50%)、polygon()、inset(10px)clip-path: circle(50%);

这些属性在现代网页设计中非常有用，可以帮助实现更丰富的视觉效果和更灵活的布局。

响应式多媒体

<picture> 标签是 HTML5 引入的一种用于提供不同图片格式或尺寸的选择机制，目的是让浏览器根据设备的特性（如屏幕尺寸、分辨率、设备类型等）选择最适合的图片。它包含一个或多个 <source> 元素，每个 <source> 元素都可以为不同的条件提供不同的尺寸或格式的图片、音视频等。而 <img> 元素则是一个默认的回退选项，如果没有任何 匹配条件，则会显示 <img> 中定义的图片。

<picture>
    <source srcset="image-small.jpg" media="(max-width: 600px)">
    <source srcset="image-large.jpg" media="(min-width: 601px)">
    <img src="image.jpg" alt="Description of the image">
</picture>

background-image

.element {  
    background-image: url('path/to/your/image.jpg');  
    /* 其他背景相关属性，如 background-size, background-position 等 */  
}

background-image 是 CSS 中用于设置元素背景图像的属性。它支持多种类型的图像源，包括本地文件、网络图片、渐变色等。以下是 background-image 的常用属性参数及其说明，以表格形式展示：

属性参数描述常用值示例
none不设置背景图像，背景为透明。-background-image: none;
url()指定背景图像的路径。url('image.jpg')、url('/path/to/image.png')、url(http://example.com/image.jpg)background-image: url('background.jpg');
linear-gradient()创建线性渐变背景。to top、to bottom、to left、to right、45deg、颜色值（如 red、#ff0000）background-image: linear-gradient(to right, red, blue);
radial-gradient()创建径向渐变背景。circle、ellipse、at center、at 50% 50%、颜色值background-image: radial-gradient(circle at center, red, blue);
repeating-linear-gradient()创建重复的线性渐变背景。to top、to bottom、to left、to right、45deg、颜色值background-image: repeating-linear-gradient(to right, red, blue 10px);
repeating-radial-gradient()创建重复的径向渐变背景。circle、ellipse、at center、at 50% 50%、颜色值background-image: repeating-radial-gradient(circle at center, red, blue 10px);
conic-gradient()创建圆锥渐变背景（支持现代浏览器）。from 90deg、at center、颜色值background-image: conic-gradient(from 90deg at center, red, blue);
image()使用 image() 函数定义图像，支持更复杂的图像源（如 SVG）。image(url('image.svg'))、image(linear-gradient(to right, red, blue))background-image: image(url('background.svg'));
element()使用页面上的另一个元素作为背景图像（非标准，部分浏览器支持）。element(#id)background-image: element(#otherElement);

说明

  1. url()：最常用的背景图像设置方式，支持本地路径或网络路径。
  2. 渐变背景：
    • linear-gradient()：创建线性渐变，方向可以是水平、垂直或对角线。
    • radial-gradient()：创建径向渐变，从一个点向外扩散。
    • repeating-linear-gradient() 和 repeating-radial-gradient()：创建重复的渐变背景。
    • conic-gradient()：创建圆锥渐变，适合创建彩虹色或圆形渐变效果。
  3. image() 和 element()：更高级的用法，支持复杂的图像源或页面元素作为背景。

background

使用同 background-image，只不过他是一个复合属性：

[background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment] [background-origin] [background-clip];

background 是 CSS 中一个非常强大的复合属性，用于综合设置元素的背景样式。它允许你一次性定义背景颜色、背景图像、背景重复方式、背景位置、背景尺寸等多个背景相关属性。通过合理使用 background，可以极大地简化代码并提高开发效率。

background 属性的组成部分

  1. background-color：背景颜色。
  2. background-image：背景图像。
  3. background-repeat：背景图像的重复方式。
  4. background-position：背景图像的位置。
  5. background-size：背景图像的尺寸。
  6. background-attachment：背景图像的滚动行为（固定或滚动）。
  7. background-origin：背景图像的起始位置（相对于边框、内边距或内容区域）。
  8. background-clip：背景图像的裁剪区域（裁剪到边框、内边距或内容区域）。

语法

background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment] [background-origin] [background-clip];

常用值 以下是一些常用的 background 属性值及其说明：

属性常用值描述
background-colorred、#ff0000、rgba(255, 0, 0, 0.5)、transparent设置背景颜色。
background-imagenone、url('image.jpg')、linear-gradient()、radial-gradient()设置背景图像。
background-repeatrepeat、no-repeat、repeat-x、repeat-y、space、round设置背景图像的重复方式。
background-positioncenter、top left、50% 50%、left、right、bottom设置背景图像的位置。
background-sizeauto、100% 100%、cover、contain设置背景图像的尺寸。
background-attachmentscroll、fixed、local设置背景图像的滚动行为。
background-originpadding-box、border-box、content-box设置背景图像的起始位置。
background-clippadding-box、border-box、content-box设置背景图像的裁剪区域。

注意事项

  1. 顺序问题：在 background 中，background-color 可以放在任何位置，但其他属性的顺序通常需要按照 background-image、background-repeat、background-position、background-size 的顺序书写，否则可能会导致解析错误。
  2. 多层背景：可以同时设置多个背景层，每层背景用逗号分隔。上层背景会覆盖下层背景。
  3. 默认值：如果某些属性未显式设置，将使用其默认值。例如，background-repeat 的默认值是 repeat，background-position 的默认值是 0% 0%。

image-set

CSS 中用于定义不同分辨率下选择合适图片的语法。

可以看做 url 的增强版

语法

image-set(url1 1x, url2 2x, url3 3x);
  • url1, url2, url3: 指定不同分辨率下使用的图片资源路径。
  • 1x, 2x, 3x: 指定每个图片的分辨率倍数。1x 表示标准分辨率，2x 表示高分辨率屏幕（例如 Retina 屏幕），3x 则表示更高分辨率的屏幕。

示例：

.element {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x,
    url('image-3x.jpg') 3x
  );
}

content 属性

主要用于在生成的内容中插入文本、图像或其他数据。它通常与 伪元素（::before 和 ::after）一起使用，用来向页面中添加一些额外的内容，而无需修改 HTML 结构。

同理，content 也可以直接作用于元素上，用于替换元素内部内容：

// 这样使用，直接清空 div 内部的所有内容，并替换为指定的图片
content: url('image.jpg');
content: image-set(url('image.jpg'));

mask

mask 属性用于创建蒙版（masking），可以对元素的可见部分进行裁剪或遮罩

  /* 使用图片作为蒙版 */
  -webkit-mask-image: url('mask-image.png'); /* WebKit 浏览器（如 Chrome 和 Safari） */
  mask-image: url('mask-image.png');         /* 标准语法 */
  mask-size: cover;                          /* 蒙版图片的尺寸 */
  mask-position: center;                     /* 蒙版图片的位置 */
  mask-repeat: no-repeat;                    /* 蒙版图片是否重复 */

使用 border 加边框图片

border: 10px solid transparent; /* 定义边框宽度 */
border-image: url('border-image.png') 30 round; /* 使用图片作为边框 */

border-image 是一个复合属性，用于将图片设置为元素的边框，取代传统的边框样式。它由以下五个子属性组成：

子属性描述常用值
border-image-source定义边框图片的路径。none、url('image.jpg')、linear-gradient()。
border-image-slice定义图片的切割方式。一个或多个值（如 30、30%），用于将图片划分为九个区域。
border-image-width定义边框图片的宽度。一个或多个值（如 10px、1），用于设置边框的厚度。
border-image-outset定义边框图片超出边框的距离。一个或多个值（如 10px），用于设置边框图片的外延尺寸。
border-image-repeat定义边框图片的重复方式。stretch、repeat、round、space。

canvas

在前端开发中，canvas 元素被广泛用于绘制图形、渲染游戏和处理图像。以下是一些基于 canvas 的优秀开源库：

库名描述链接
Fabric.js一个面向对象的 canvas 库，提供丰富的 API，用于创建交互式和可编辑的图形应用，适合在线图像编辑器和绘图工具。Fabric.js
Konva.js专注于高性能的 2D canvas 库，适用于需要复杂图形和动画的应用，如数据可视化和游戏开发。Konva.js
Pixi.js一个快速的 2D 渲染引擎，使用 WebGL 提供高性能的渲染，适用于需要复杂视觉效果的游戏和应用。Pixi.js
Rough.js一个轻量级的库，用于绘制手绘风格的图形，支持线条、曲线、弧线、多边形、圆形和椭圆等。Rough.js
Signature Pad一个基于 canvas 的签名库，用于绘制签名，支持在所有现代桌面和移动浏览器中使用。Signature Pad
Phaser一个功能丰富的 HTML5 游戏框架，利用 canvas 和 WebGL 提供高性能的游戏开发体验。Phaser
iDraw.js一个基于纯 canvas 实现的绘图和素材操控的 JavaScript 库，可用于开发各种可视化操控应用。iDraw.js
uCharts高性能的前端应用图表库，支持跨平台，适用于各种数据可视化场景。uCharts
x-spreadsheet一个基于 Web 的轻量级 Excel 开发库，使用 canvas 构建，提供完整的电子表格功能。x-spreadsheet
Excalidraw一个虚拟的白板工具，用于绘制手绘风格的图表和图形，支持协作功能。Excalidraw

这些库为开发者提供了多种选择，以满足不同的项目需求。

canvas 的使用，我会单独开一个系列来介绍。

const canvas = document.createElement('canvas');  
const ctx = canvas.getContext('2d');  
const img = new Image();  
img.onload = function() {  
    canvas.width = img.width;  
    canvas.height = img.height;  
    ctx.drawImage(img, 0, 0);  
    document.body.appendChild(canvas);  
};  
img.src = 'path/to/your/image.jpg';

svg

svg 的使用，可以参考 # 用 SVG 来做你自己的动画！

svg 里加载图片 ：

 <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <!-- 加载图片 -->
    <image href="https://example.com/image.jpg" x="50" y="50" width="300" height="200" />
 </svg>

Object、Embed标签

<object data="URL" type="MIME_TYPE">
  <!-- 回退内容 -->
  <p>无法加载资源，请检查链接。</p>
</object>

!-- 加载 PDF 文件 -->
<embed src="document.pdf" type="application/pdf" width="100%" height="500px">

<!-- 加载图片 -->
<embed src="image.jpg" type="image/jpeg" width="300" height="200">

使用场景

  • <object>：

    • 适用于需要嵌入多种类型的资源（如 PDF、图片、音频、视频）。
    • 适用于需要提供回退内容的场景。
    • 适用于需要更好的兼容性和语义化的场景。

  • <embed>：

    • 适用于简单的嵌入需求，如插件或媒体文件，可以使用 iframe 平替。
    • 适用于不需要回退内容的场景。
    • 适用于需要更简洁语法的场景。

video 画中画模式

使用 web 支持的 requestPictureInPicture API，在用户触发的事件中可以被调用：

const video = document.querySelector('video');

video.addEventListener('click', () => {
  video.requestPictureInPicture().then((pictureInPictureWindow) => {
  pictureInPictureWindow.addEventListener(
    "resize",
    () => {},
    false,
  );
})

上面的代码，在video被点击时，自动播放画中画:

1.gif

为视频或音频添加文字描述/字幕

使用 track 标签：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    src="subtitles_en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
    default
  >
  <track
    src="subtitles_zh.vtt"
    kind="subtitles"
    srclang="zh"
    label="中文"
  >
</video>

字幕一般为 .vtt 格式：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
Hello, world!

2
00:00:05.000 --> 00:00:08.000
你好，世界！

第三方库，例如 Video.js、ReactPlayer 等

当然也可以使用语音识别技术（Web Speech API）实时生成字幕：

// 默认从用户的麦克风获取音频输入
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript;
  console.log('识别结果：', transcript);
  // 将识别结果显示为字幕
};

recognition.start();

audio

<audio controls preload="auto" mute loop>
  <source src="audio-file.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

常用属性：

  • autoplay：设置或返回音频是否应在准备好后立即开始播放。
  • controls：设置或返回音频是否应显示控件（如播放、暂停、音量等）。
  • currentTime：设置或返回音频的当前播放位置（以秒为单位）。
  • duration：返回音频的总时长（以秒为单位）。
  • loop：设置或返回音频是否应在播放完毕后重新开始播放。
  • muted：设置或返回音频是否应静音。
  • paused：返回音频是否处于暂停状态。
  • volume：设置或返回音频的音量（范围从 0.0 到 1.0）。

常用方法：

  • play()：开始播放音频。
  • pause()：暂停音频播放。
  • load()：重新加载音频元素。
  • canPlayType()：检查浏览器是否支持指定的音频类型。

高级使用: 通过 Web Audio API 来进行更复杂的音频处理（例如混音、音效、音量控制等）

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioElement = document.querySelector('audio');
const audioSourceNode = audioContext.createMediaElementSource(audioElement);
const gainNode = audioContext.createGain();

// 将音频源连接到增益节点
audioSourceNode.connect(gainNode);

// 增益节点连接到音频上下文的目标（扬声器）
gainNode.connect(audioContext.destination);

// 修改音量
gainNode.gain.value = 0.5;  // 设置音量为50%

video

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

常用属性：

  • controls：添加视频控件，如播放、暂停、音量等。
  • autoplay：页面加载后自动播放视频。
  • loop：视频播放完毕后自动重新播放。
  • muted：视频静音播放。
  • poster：在视频加载前显示的封面图片。
  • preload：指定浏览器在页面加载时如何预加载视频。

常用方法：

  • play()：开始播放视频。
  • pause()：暂停视频播放。
  • load()：重新加载视频元素。
  • canPlayType()：检查浏览器是否支持指定的视频类型。

3D view

<model-viewer>

一个 Google 的 3D 模型。

<model-viewer src="shared-assets/models/NeilArmstrong.glb" ar environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>

image.png

webGL/Three.js

一种基于浏览器的图形渲染技术，允许开发者在网页上创建实时的 3D 图形。

WebGL 是一个低级的 3D 图形 API，运行在浏览器的 <canvas> 元素上。它基于 OpenGL ES 2.0，允许开发者直接操作 GPU 进行图形渲染。

Three.js demo 可以参考这里：threejs.org/examples/#w…

web 3D 技术目前一般用在虚拟现实（VR）上，特别是在房地产、旅游和教育等领域。以下是一些其他的常用的前端 VR 技术框架和工具：

框架/工具描述
A-Frame由 Mozilla 开发的开源框架，基于 HTML 语法构建 VR 体验，降低了开发门槛。
Panolens.js专注于全景图像和视频的展示，适用于 360 度全景视图的创建。
Pannellum一个轻量级的开源全景查看器，无需依赖外部库即可实现全景展示。
Photo Sphere Viewer用于在网页中展示全景图像的插件，支持多种交互功能。
pano2vr一款所见即所得的全景VR制作软件，功能强大，就是要收钱
css3d-engine纯 CSS 的 3D 引擎，轻量级

这些工具和框架为开发者提供了多种选择，以实现不同类型的 VR 应用场景。

WebRTC

WebRTC 主要提供以下 API 来支持实时通信：

API作用
getUserMedia()获取摄像头、麦克风等设备的音视频流
RTCPeerConnection负责音视频数据的编解码、传输、网络连接管理
RTCDataChannel允许在浏览器之间进行 P2P 数据传输
getDisplayMedia()允许共享屏幕或窗口内容

WebRTC 连接流程

  1. 获取本地媒体流：使用 getUserMedia() 访问用户的摄像头和麦克风。
  2. 创建 RTCPeerConnection：用于管理音视频连接。
  3. 信令交换：通过 WebSocket、Socket.io 或其他方式交换 SDP（会话描述协议）和 ICE（交互式连接建立）信息，帮助两端建立连接。
  4. 建立 P2P 连接：通过 ICE 服务器进行 NAT 穿透，确保连接成功。
  5. 传输数据：音视频或文本数据开始实时传输。
avatar
文章
阅读
粉丝