5000字总结 HTML5 中的音频和视频，关羽标签、属性、API 和最佳实践

HTML5 音频与视频开发完全指南：标签、属性、API 与最佳实践

一、引言：HTML5 媒体时代的到来

在 HTML5 之前，网页中的音频和视频播放依赖 Flash、Silverlight 等第三方插件，存在兼容性差、性能瓶颈和安全隐患。HTML5 引入的 <audio> 和 <video> 标签，标志着浏览器原生支持媒体播放的时代到来。这两个标签不仅简化了媒体嵌入流程，还提供了强大的 API 和事件系统，使开发者能够完全掌控媒体播放逻辑。本文将从基础语法、属性详解、API 应用、兼容性处理到进阶技巧，全面解析 HTML5 音频与视频的使用方法。

二、基础语法：<audio> 与 <video> 标签的核心结构

2.1 音频标签：<audio>

基础用法
<audio src="audio.mp3" controls autoplay muted loop></audio>
  • src：指定音频文件路径（单资源模式，兼容性有限）。
  • controls：显示浏览器默认控件（播放按钮、进度条、音量调节等）。
  • autoplay：页面加载后自动播放（移动端浏览器通常禁止自动播放带声音的媒体）。
  • muted：静音播放（配合 autoplay 使用以绕过移动端限制）。
  • loop：循环播放。
多格式支持（推荐写法）
<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"><source src="audio.wav" type="audio/wav"><!-- 浏览器不支持时的提示 --><p>你的浏览器不支持音频播放，请下载 <a href="audio.mp3">音频文件</a>。</p>
</audio>
  • <source> 标签：提供多个格式的媒体文件，浏览器会按顺序加载第一个支持的格式。
  • type 属性：指定媒体类型（MIME 类型），帮助浏览器快速判断是否支持该格式，可省略编码信息（如 type="audio/mpeg" 等效于 type="audio/mpeg; codecs="mp3"）。

2.2 视频标签：<video>

基础用法
<video src="video.mp4" controls width="640" height="360" poster="preview.jpg" preload="auto"></video>
  • width/height：设置视频显示尺寸（建议通过 CSS 控制样式，但这两个属性会影响媒体加载时的布局占位）。
  • poster：加载视频前显示的预览图片（提升用户体验，避免空白）。
  • preload：控制视频预加载策略（详见下文属性详解）。
多格式支持
<video controls width="100%" height="auto"><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogg" type="video/ogg"><p>你的浏览器不支持视频播放，请下载 <a href="video.mp4">视频文件</a>。</p>
</video>
  • 视频常用格式：MP4（H.264 编码，兼容性最佳）、WebM（VP8/VP9 编码，开源免费）、OGG（Theora 编码，老旧浏览器支持有限）。

三、核心属性详解：控制媒体行为与外观

3.1 通用属性（音频/视频共用）

属性名描述
controls布尔值，显示默认控件（若不设置，需通过 JavaScript 实现自定义控件）。
controlsList自定义默认控件的显示项（如 controlsList="nodownload noremoteplayback"，支持值：play/pause, volume, fullscreen, download 等，浏览器兼容性有限）。
autoplay布尔值，自动播放（需配合 muted 在移动端使用）。
muted布尔值，静音播放。
loop布尔值，循环播放（可通过 loop="infinite" 显式声明，效果一致）。
preload控制预加载行为，可选值：
none（不预加载）
metadata（仅加载元数据，如时长、尺寸）
auto（默认，加载整个媒体文件，浏览器可自由决定）。
src单资源路径（优先级低于 <source> 标签内的资源）。
crossorigin跨域资源共享策略（anonymous 或 use-credentials，用于加载第三方媒体文件）。
playsinline移动端浏览器中允许视频在网页内播放，不进入全屏模式（iOS 特有属性，需配合 webkit-playsinline）。

3.2 视频专属属性

属性名描述
width视频显示宽度（像素值或百分比，建议通过 CSS 控制响应式布局）。
height视频显示高度（同上）。
poster视频加载前显示的海报图片路径（建议尺寸与视频一致，避免拉伸）。
muted同通用属性（视频默认静音更常见，避免自动播放时打扰用户）。
controls同通用属性（视频控件包含播放按钮、进度条、音量、全屏按钮）。

3.3 <source> 标签属性

属性名描述
src媒体文件路径。
type媒体类型（MIME 类型，如 video/mp4 或 audio/ogg）。
media媒体查询表达式（根据设备特性选择资源，如 media="(min-width: 768px)"，用于响应式设计）。

四、事件系统：监听媒体状态变化

HTML5 媒体元素提供了丰富的事件，可通过 JavaScript 监听播放、暂停、加载、错误等状态。以下是常用事件列表：

4.1 生命周期事件

事件名触发时机
loadstart开始加载媒体资源时触发。
durationchange媒体时长（duration 属性）可用时触发（初始为 NaN，加载元数据后更新）。
loadedmetadata元数据（时长、尺寸等）加载完成时触发。
loadeddata第一帧视频数据或音频数据加载完成时触发。
progress加载过程中持续触发（可用于实现进度条加载动画）。
canplay媒体已加载到足够程度，可以开始播放（可能非完整加载，缓冲足够即可）。
canplaythrough媒体可以完整播放，无需中途缓冲时触发。
error加载或播放过程中发生错误时触发（可通过 element.error 获取错误对象）。

4.2 播放控制事件

事件名触发时机
play媒体开始播放（包括从暂停恢复播放）时触发。
pause媒体暂停时触发。
waiting媒体等待数据（如缓冲）时触发。
seeking用户开始拖动进度条（ seek 操作）时触发。
seeked用户完成拖动进度条（ seek 操作结束）时触发。
timeupdate当前播放时间（currentTime 属性）变化时持续触发（每秒约 60 次，用于更新进度条）。
ended媒体播放结束时触发（可结合 loop 属性实现循环逻辑）。

4.3 示例：监听视频播放状态

const video = document.querySelector('video');// 监听播放事件
video.addEventListener('play', () => {console.log('视频开始播放');
});// 监听暂停事件
video.addEventListener('pause', () => {console.log('视频暂停');
});// 监听播放结束
video.addEventListener('ended', () => {console.log('视频播放完毕');// 重置播放进度并重新播放video.currentTime = 0;video.play();
});// 监听错误
video.addEventListener('error', (e) => {console.error('媒体加载错误：', e.target.error);// 错误对象包含 code 1（网络错误）、2（解码错误）、3（资源未找到）
});

五、JavaScript API：深度控制媒体行为

通过 DOM 接口，开发者可完全掌控媒体播放、进度、音量等参数，实现自定义控件或复杂交互逻辑。

5.1 常用属性（音频/视频共用）

属性名描述
currentTime当前播放时间（单位：秒，可写，用于设置进度）。
duration媒体总时长（单位：秒，加载元数据后可用，初始为 NaN）。
paused布尔值，媒体是否处于暂停状态（只读）。
muted布尔值，是否静音（可写）。
volume音量大小（0.0 到 1.0 之间的数值，可写）。
playedTimeRanges 对象，记录已播放的时间范围（用于进度条渲染）。
bufferedTimeRanges 对象，记录已缓冲的时间范围（用于显示缓冲进度）。
seeking布尔值，是否正在进行 seek 操作（只读）。

5.2 常用方法

方法名描述
play()开始播放媒体（返回 Promise，可捕获播放失败错误，如移动端自动播放限制）。
pause()暂停播放媒体。
load()重新加载媒体（用于切换资源后刷新）。
canPlayType(type)判断浏览器是否支持指定类型的媒体（返回 ''、maybe 或 probably）。

5.3 视频专属属性

属性名描述
videoWidth视频原始宽度（像素值，只读）。
videoHeight视频原始高度（像素值，只读）。
poster海报图片路径（可写，动态更换预览图）。
webkitExitFullscreen()退出全屏模式（不同浏览器前缀：webkit、moz、ms，建议使用通用 API）。

5.4 自定义进度条实现

<video id="myVideo" controls><source src="video.mp4" type="video/mp4">
</video>
<input type="range" id="progressBar" value="0"><script>const video = document.getElementById('myVideo');const progressBar = document.getElementById('progressBar');// 更新进度条video.addEventListener('timeupdate', () => {progressBar.value = (video.currentTime / video.duration) * 100;});// 拖动进度条progressBar.addEventListener('input', (e) => {video.currentTime = (e.target.value / 100) * video.duration;});
</script>

六、兼容性处理：覆盖主流浏览器

尽管 HTML5 媒体标签已广泛支持，但不同浏览器对编解码器的支持存在差异：

6.1 音频格式兼容性

格式MP3（MPEG-1 Audio Layer III）OGG（Vorbis）WAV（PCM）AAC（ADTS）
Chrome✅✅✅✅（通过 <source>）
Firefox✅（需手动启用，旧版本不支持）✅✅✅
Safari✅❌✅✅
Edge✅✅✅✅

建议：提供 MP3 和 OGG 格式，覆盖 95% 以上的浏览器。

6.2 视频格式兼容性

格式MP4（H.264）WebM（VP8/VP9）OGG（Theora）
Chrome✅✅✅
Firefox✅✅✅
Safari✅（仅支持 H.264，不支持 VP9）❌❌
Edge✅✅❌

建议：提供 MP4（H.264）和 WebM（VP9）格式，优先使用 MP4 作为第一个 <source>。

6.3 移动端特殊处理

  • 自动播放限制：iOS 和 Android 浏览器禁止自动播放带声音的媒体，需设置 muted 属性。
  • 全屏模式：视频在移动端默认进入全屏播放，可通过 playsinline（iOS）和 webkit-playsinline 实现Inline 播放。
  • 触摸事件延迟：点击播放按钮可能存在 300ms 延迟，可使用 touchstart 事件替代 click 来优化响应速度。

七、最佳实践：性能、体验与无障碍

7.1 性能优化

  1. 格式选择：

    • 音频：优先使用 MP3（兼容性）或 AAC（更高压缩率）。
    • 视频：使用 H.264（MP4）作为基础格式，WebM 作为补充，避免使用老旧格式。
    • 编码参数：视频码率控制在 1-2 Mbps（1080p），音频码率 128 kbps 即可。

  2. 预加载策略：

    • preload="none"：适用于非关键媒体（如用户触发后才播放的音频）。
    • preload="metadata"：适用于需要显示时长或预览的媒体（如视频列表）。
    • preload="auto"：适用于首屏关键视频（如背景视频），但需注意流量消耗。

  3. 响应式设计：

    video {width: 100%;height: auto;max-width: 1280px; /* 最大显示宽度 */
}
    • 避免固定 width 和 height，通过 CSS 实现自适应。

7.2 用户体验优化

  1. 默认控件与自定义控件：

    • 复杂交互场景（如教育视频的章节跳转）建议隐藏默认控件（controls="false"），使用 JavaScript 构建自定义控件。
    • 简单场景直接使用默认控件，减少开发成本。

  2. 错误处理：

    • 在 <audio> 和 <video> 标签内添加友好的错误提示，引导用户下载或更换浏览器。
    • 通过 error 事件捕获加载错误，显示自定义错误信息。

  3. 移动端适配：

    • 禁用自动播放声音：设置 muted，并在视频加载时显示“点击播放”提示。
    • 优化触摸目标：确保播放按钮足够大（≥44x44px），便于手指点击。

7.3 无障碍（Accessibility）

  1. 语义化标签：

    • 为媒体元素添加 aria-label 或 aria-labelledby，描述其用途，例如：
      <video controls aria-label="产品介绍视频">...
</video>

  2. 字幕与字幕轨道：

    • 使用 <track> 标签添加字幕（VTT 格式），支持多语言切换：
      <video controls><source src="video.mp4" type="video/mp4"><track src="subtitles.en.vtt" kind="subtitles" srclang="en" label="English"><track src="subtitles.zh.vtt" kind="subtitles" srclang="zh" label="中文">
</video>
    • VTT 文件格式示例（subtitles.en.vtt）：
      WEBVTT00:00:00.000 --> 00:00:03.000
Hello, world!00:00:03.000 --> 00:00:06.000
This is a subtitle.

  3. 键盘导航：

    • 默认控件支持键盘操作（空格/回车播放/暂停，左右箭头调整进度），自定义控件需手动实现键盘事件监听。

八、进阶应用：超越基础功能

8.1 自定义媒体控件

通过 HTML/CSS/JS 实现完全自定义的播放界面，步骤如下：

  1. HTML 结构：

    <video id="customVideo" poster="poster.jpg"><source src="video.mp4" type="video/mp4">
</video>
<div class="controls"><button id="playBtn">▶</button><div class="progress"><div id="progressBar" class="progress-bar"></div></div><input type="range" id="volumeBar" value="1" max="1">
</div>

  2. CSS 样式：

    .controls {position: absolute;bottom: 0;left: 0;right: 0;padding: 10px;background: rgba(0,0,0,0.5);color: white;
}
.progress {height: 5px;background: #ccc;margin: 0 10px;flex-grow: 1;
}
.progress-bar {height: 100%;background: #ff5722;
}

  3. JavaScript 逻辑：

    const video = document.getElementById('customVideo');
const playBtn = document.getElementById('playBtn');
const progressBar = document.getElementById('progressBar');
const volumeBar = document.getElementById('volumeBar');// 播放/暂停控制
playBtn.addEventListener('click', () => {if (video.paused) {video.play();playBtn.textContent = '❚❚';} else {video.pause();playBtn.textContent = '▶';}
});// 进度条更新
video.addEventListener('timeupdate', () => {progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`;
});// 拖动进度条
progressBar.addEventListener('click', (e) => {const x = e.clientX - progressBar.getBoundingClientRect().left;const percentage = x / progressBar.offsetWidth;video.currentTime = video.duration * percentage;
});// 音量控制
volumeBar.addEventListener('input', (e) => {video.volume = e.target.value;
});

8.2 媒体捕获：摄像头与麦克风

使用 navigator.mediaDevices.getUserMedia API 访问设备媒体流：

// 申请摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {const video = document.createElement('video');video.srcObject = stream;video.play();document.body.appendChild(video);}).catch((error) => {console.error('媒体捕获失败：', error);});

8.3 流媒体播放：HLS 与 DASH

虽然 <video> 标签原生不支持 HLS（.m3u8）和 DASH 格式，但可通过第三方库实现：

  • HLS.js：纯 JavaScript 实现的 HLS 播放器，兼容所有浏览器：
    <video id="hlsVideo"></video>
<script src="hls.js"></script>
<script>if (Hls.isSupported()) {const hls = new Hls();hls.loadSource('stream.m3u8');hls.attachMedia(document.getElementById('hlsVideo'));}
</script>

8.4 媒体分析与处理

通过 Canvas 和 WebGL 对视频帧进行实时处理（如滤镜、人脸识别）：

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');video.addEventListener('frame', () => { // 假设视频触发 frame 事件ctx.drawImage(video, 0, 0, canvas.width, canvas.height);// 在这里进行图像处理
});

九、服务器配置：确保媒体正确加载

  1. MIME 类型设置：

    • 确保服务器返回正确的 MIME 类型，否则浏览器可能无法识别文件。常见类型：
      文件扩展名MIME 类型
      .mp4video/mp4
      .webmvideo/webm
      .oggvideo/ogg
      .mp3audio/mpeg
      .vtttext/vtt

  2. 跨域资源共享（CORS）：

    • 若媒体文件存储在第三方域名，需在服务器端设置 Access-Control-Allow-Origin 头，允许浏览器加载：
      Access-Control-Allow-Origin: *

十、总结：HTML5 媒体开发的核心价值

HTML5 的 <audio> 和 <video> 标签不仅实现了媒体播放的标准化，更通过开放的 API 和事件系统，让网页媒体功能进入可编程时代。从基础嵌入到自定义控件，从单文件播放到流媒体处理，开发者可根据需求选择合适的方案。在实践中，需平衡兼容性、性能与用户体验，合理使用多格式资源、预加载策略和无障碍特性，确保媒体内容在不同设备和浏览器中稳定运行。随着 Web 技术的发展，未来还将有更多媒体相关 API（如 WebCodecs、WebTransport）加入，进一步提升网页媒体处理的能力。掌握 HTML5 媒体开发的核心知识，是构建现代多媒体应用的必备基础。

（全文约 5000 字，涵盖基础语法、属性、事件、API、兼容性、最佳实践及进阶应用，满足开发场景的全面需求。）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/905048.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C语言】(9)—指针3

【C语言】(9)—指针3

文章目录 一、字符指针的深入理解二、数组指针详解三、二维数组传参的本质四、函数指针及其应用五、函数指针数组与转移表 一、字符指针的深入理解 1.1 字符指针的基本使用 字符指针(char*)是指向字符类型数据的指针&#xff0c;它有两种常见的使用方式&#xff1a; // 方式一…
阅读更多...
MDK调试技巧

MDK调试技巧

1、自动生成反汇编 fromelf -c -o "$LL.txt" "#L" 解释&#xff1a; 1、fromelf 是 ARM Compiler 工具链中的一个命令行工具&#xff0c;从fromelf这个名字上我们就能看到它是用来处理elf文件的&#xff0c;elf 全称 Executable and Linking Format &…
阅读更多...
嵌入式STM32学习——433M无线遥控灯

嵌入式STM32学习——433M无线遥控灯

1.433M无限模块工作原理&#xff1a; 数据发射模块的工作频率为315M&#xff0c;采用声表谐振器SAW稳频&#xff0c;频率稳定度极高&#xff0c;当环境温度在-25~85度之间变化时&#xff0c;频飘仅为3ppm。 接收到信号&#xff0c;接收模块对应针脚输出高电平&#xff0c;有DO…
阅读更多...
JDBC工具类的三个版本

JDBC工具类的三个版本

一、JDBC连接数据库的7个步骤 1、加载驱动 2、获取连接 3、编写sql 4、获取执行sql的stmt对象 有两种 stmt&#xff08;存在sql注入问题 字符串拼接&#xff09; pstmt&#xff08;预编译可以防止sql注入&#xff09; 5、执行sql 拿到结果集 6、遍历结果集 7、关闭资源…
阅读更多...
3.1/Q1，Charls最新文章解读

3.1/Q1，Charls最新文章解读

文章题目&#xff1a;Predictive model for sarcopenia in chronic kidney disease: a nomogram and machine learning approach using CHARLS data DOI&#xff1a;10.3389/fmed.2025.1546988 中文标题&#xff1a;慢性肾病肌肉减少症的预测模型&#xff1a;使用 CHARLS 数据的…
阅读更多...
DEEPPOLAR：通过深度学习发明非线性大核极坐标码（2）

DEEPPOLAR：通过深度学习发明非线性大核极坐标码（2）

目录 2.问题的提出和背景 2.1 信道编码 2.2.极化码 极坐标编码 极坐标解码 原文&#xff1a;《DEEPPOLAR: Inventing Nonlinear Large-Kernel Polar Codes via Deep Learning》 2.问题的提出和背景 2.1 信道编码 信道编码是一种为传输添加冗余的技术&#xff0c;使其对…
阅读更多...
手机当电脑播放器 soundwire

手机当电脑播放器 soundwire

soundwire server免费下载_soundwire serverPC下载_3DM软件 win11可用延迟1秒 安卓端音频缓冲区大小改成8k延迟就没那么夸张了 我用audiorelay连上了没声音
阅读更多...
LVGL中的事件

LVGL中的事件

文章目录 &#x1f9f1; 一、什么是 LVGL 事件&#xff1f;&#x1f3af; 二、事件回调的注册参数解释&#xff1a;示例&#xff1a; &#x1f4da; 三、常见事件类型&#xff08;lv_event_code_t&#xff09;✅ 1. 输入类事件&#xff08;用户交互&#xff09;✅ 2. 组件状态类…
阅读更多...
警惕C#版本差异多线程中的foreach陷阱

警惕C#版本差异多线程中的foreach陷阱

警惕C#版本差异多线程中的foreach陷阱​ 同样的代码，不同的结果闭包捕获的“时间差”问题绕过闭包陷阱的三种方法Lambda立即捕获（代码简洁）显式传递参数（兼容性最佳）使用Parallel.ForEach（官方推荐）注意事项：版本兼容性指南警惕多线程中的foreach陷阱：C#版本差异引发的…
阅读更多...
mac u盘重装mac10.15Catalina系统

mac u盘重装mac10.15Catalina系统

我的电脑提mac2017的air 重装过程 (文件夹中间有空格时为 Install\ macOS\ Catalina 才行) &#xff08;有需要的&#xff0c;最好做一下备份&#xff0c;有些东西可以及时找到配置和文件之类的&#xff0c; u盘制作是在mac电脑上操作的) 一、先下载系统镜像文件或自行到官方…
阅读更多...
说说es配置项的动态静态之分和集群配置更新API

说说es配置项的动态静态之分和集群配置更新API

这天因为某件工作来到了es官网某个参数配置相关的页面&#xff0c;注意到了下图圆圈里的“Dynamic”&#xff1a; 链接&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/8.1/modules-cluster.html#misc-cluster-settings 显然这是对配置项的一个描述&am…
阅读更多...
2025软考【系统架构设计师】：两周极限冲刺攻略（附知识点解析+答题技巧）

2025软考【系统架构设计师】：两周极限冲刺攻略（附知识点解析+答题技巧）

距离2025上半年“系统架构设计师”考试已经只剩最后两周了&#xff0c;还没有准备好的小伙伴赶紧行动起来。为了帮助大家更好的冲刺学习&#xff0c;特此提供一份考前冲刺攻略。本指南包括考情分析、答题技巧、注意事项三个部分&#xff0c;可以参考此指南进行最后的复习要领&a…
阅读更多...
web animation API 锋利的css动画控制器 (更新中）

web animation API 锋利的css动画控制器 (更新中）

什么是web animation api 以及为什么要使用web animation api&#xff1f; web animation API 是web页面中控制DOM元素动画效果的javascript原生API。 它能够逐个关键帧控制动画效果&#xff0c;具有Timeline 机制‌能通过javascript来实现动画的暂停&#xff0c;播放&#x…
阅读更多...
Linux基础io知识

Linux基础io知识

理解 "文件" 狭义理解 文件在磁盘里 磁盘是永久性存储介质&#xff0c;因此文件在磁盘上的存储是永久性的 磁盘是外设&#xff08;即是输出设备也是输入设备&#xff09; 磁盘上的文件 本质是对文件的所有操作&#xff0c;都是对外设的输入和输出 简称 IO 广义理解…
阅读更多...
视频编解码学习三之显示器续

视频编解码学习三之显示器续

一、现在主流的显示器是LCD显示器吗&#xff1f; 是的&#xff0c;现在主流的显示器仍然是 LCD&#xff08;液晶显示器&#xff0c;Liquid Crystal Display&#xff09;&#xff0c;但它已经细分为多种技术类型&#xff0c;并和其他显示技术&#xff08;如OLED&#xff09;形成…
阅读更多...
[测试]并发模拟工具Apache Bench 进行AB压力测试

[测试]并发模拟工具Apache Bench 进行AB压力测试

下载(windows) https://www.apachelounge.com/download/ 下载后解压&#xff0c;解压后进入bin目录&#xff0c;打开CMD&#xff0c;即可使用 命令 ab.exe -n 请求总数 -c 并发数 http://网站/ 比如ab.exe -n 1000 -c 100 http://127.0.0.1:5555/ 看不懂的话直接把结果让AI分析…
阅读更多...
LeetCode 热题 100 138. 随机链表的复制

LeetCode 热题 100 138. 随机链表的复制

LeetCode 热题 100 | 138. 随机链表的复制 大家好&#xff0c;今天我们来解决一道经典的链表问题——随机链表的复制。这道题在 LeetCode 上被标记为中等难度&#xff0c;要求深拷贝一个带有随机指针的链表。 问题描述 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额…
阅读更多...
开源分享：TTS-Web-Vue系列：Vue3实现固定顶部与吸顶模式组件

开源分享：TTS-Web-Vue系列：Vue3实现固定顶部与吸顶模式组件

&#x1f3af; 本文是TTS-Web-Vue系列的第十三篇文章&#xff0c;重点介绍项目中固定顶部导航和内容区域吸顶模式的实现方案。通过这些优化&#xff0c;我们大幅提升了用户在滚动页面时的交互体验&#xff0c;使关键操作区域始终可见&#xff0c;同时实现了更现代化的界面视觉效…
阅读更多...
Docker、Docker-compose、K8s、Docker swarm之间的区别

Docker、Docker-compose、K8s、Docker swarm之间的区别

1.Docker docker是一个运行于主流linux/windows系统上的应用容器引擎&#xff0c;通过docker中的镜像(image)可以在docker中构建一个独立的容器(container)来运行镜像对应的服务&#xff1b; 例如可以通过mysql镜像构建一个运行mysql的容器&#xff0c;既可以直接进入该容器命…
阅读更多...
用浏览器打开pdf，如何使用划词翻译？

用浏览器打开pdf，如何使用划词翻译？

1. 浏览器 | 扩展 | 获取 Microsoft Edge 扩展 2. 搜索 “沙拉查词” 点击“获取” 3. 扩展这里选择 管理扩展 勾选 “允许访问文件url” 注&#xff1a;这里一定要勾选&#xff0c;否则沙拉查词无法访问.pdf 文件&#xff01;&#xff01;&#xff01;会出现下图错误 4. 右击…
阅读更多...
最新文章

Copyright @ 2022~2023