本文将介绍如何在网站中添加和优化音频与视频文件。
网页音视频格式指南
虽然市面上存在多种自称兼容网页的音视频格式，但实际上，在当今的主流网页浏览器中，只有采用 H264 编码的 MP4 视频和 MP3 音频得到了普遍支持。
许多不同的程序都可以生成兼容浏览器的 MP3 文件，例如Audacity 或 Music.app。
视频处理相对复杂。即使视频文件的扩展名是正确的 MP4 格式，它也可能没有使用正确的视频编码器。若视频在某一浏览器中能够正常播放，但在其他浏览器中无法播放，则很可能是因为未采用 H264 编码。此外，很多应用程序在生成看似格式正确的视频文件时，往往会产生体积过大的文件，进而导致网页加载缓慢和性能问题。我们推荐使用 Handbrake 来生成体积高效且与网页兼容的视频。如果不确定如何设置，Handbrake 的默认预设值通常效果不错。
需要注意的是，浏览器不支持带音频的视频自动播放；视频必须静音才能自动播放。
音频要向网站添加音频，你可以将 MP3 文件从桌面直接拖拽到页面，或从已上传至“文件库”的文件中选择。这样会在页面中插入一个可配置的音频播放器。
添加音频后，你可能需要对播放器样式进行调整，这可以通过修改 CSS 来实现。你可以通过修改 CSS 中名为 audio-player 的样式来配置播放器界面的字体和样式。此外，还可以使用一些 CSS 变量 来控制音频播放器的其他属性。
例如，你可以通过调整 --play-text 和 --pause-text 变量为播放和暂停按钮添加文本，同时适当增加按钮宽度以保证显示效果：
audio-player::part(button) {
--icon-color: rgba(0, 0, 0, 0.85);
--icon-size: 32%;
--play-text: 'Play';--pause-text: 'Pause';
width: 6em;
display: inline-flex;
justify-content: center;
cursor: pointer;
}如果需要隐藏默认的播放和暂停图标，可以使用 display 属性：
audio-player::part(play-icon) {
display:none;
}
audio-player::part(pause-icon) {
display:none;
}或者，如果你想保留图标并将其显示在文本旁边，可以在图标右侧添加内边距，以增加图标与文本之间的距离：
audio-player::part(play-icon) {
padding-right: 1em;
padding-left: 0.6em;
}
audio-player::part(pause-icon) {
padding-right: 1em;
padding-left: 0.6em;
}视频
要向网站添加视频，可以将 MP4 格式的视频文件从桌面直接拖放到页面中，或者从“文件库”或页面的“图像”菜单中选择。无音轨的短视频会被默认设置为静音自动播放并循环，效果类似于 GIF 动画。而较长的视频则会默认采用浏览器自带的视频界面，实现正常音量播放且不自动循环。这些配置均可进行修改；视频添加到页面后，可通过右键菜单进行设置调整。
视频显示界面主要有两种选择：一种是包含可点击封面图的透明界面，另一种是带有可见时间线的浏览器默认界面。如果你选择封面图界面，当视频未播放时会显示该图片。
嵌入 Vimeo 和 YouTube 视频
只需将 Vimeo 和 YouTube 视频的 URL 或嵌入代码粘贴于页面中，即可实现视频的嵌入。如果你在设置中选择“浏览器默认”选项，这些嵌入视频会显示其各自平台的默认品牌界面。
- --