介绍
多媒体元素，例如视频和音频，可以改善用户体验并在网站上动态传达信息。 HTML5的<video>和<audio>标签使得无需插件添加多媒体，并在现代浏览器中广泛支持。这篇博客文章向中级Web开发人员和设计师教授使用HTML5标签向网站添加多媒体，从而涵盖了基础知识，例如优化，可访问性和兼容性等高级主题。阅读后，您将能够在您的网站上添加多媒体。
HTML5视频标签
HTML5 <video>标签是用于将视频内容添加到网站的强大工具。它允许开发人员将视频文件直接嵌入其HTML代码中，从而易于在任何网页上显示视频。您可以控制视频的大小和布局，添加自定义控件，甚至提供多种视频格式，以兼容跨浏览器的兼容性。
在本节中，让我们仔细查看<video>标签及其属性，并学习如何将其用于网站上的视频文件；探索如何使用CSS自定义视频播放器控件，并提供有关如何在网站中使用此标签的示例。
视频标签及其属性
HTML5 <video>标签将视频文件嵌入网站。它支持可用于控制视频的行为和外观的几种属性，例如：
src：此属性用于指定视频文件的源。值应该是视频文件的URL。
controls：此属性将默认控件添加到视频播放器，例如播放/暂停按钮，音量控制和进度栏。
width和height：这些属性用于指定视频播放器的宽度和高度。值以像素为单位。
poster：此属性指定了将在视频开始播放之前显示的图像。值应该是图像文件的URL。
autoplay：此属性使视频在加载后立即开始自动播放。
loop：使用此属性，视频循环一旦到达末端。
muted：使视频开始播放声音静音。
preload：用于指定应如何加载视频。该值可以是none，meta或auto。
playsinline：此属性指定该视频应与页面一致。
也必须注意，您可以在<video>标签中包含多个<source>标签，以提供用于跨浏览器兼容性的不同视频格式。例如，您可能包括同一视频的MP4和WebM版本。
使用视频标签嵌入网站上的视频文件
使用HTML5 <video>标签在网站上嵌入视频文件相对简单。这是一个如何做的示例：
<video width="320" height="240" controls>
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
在上面的示例中，<video>标签创建了一个宽度为320像素和240像素的视频播放器。添加了controls属性以显示视频播放器的默认控件。
<video>标签内部是一个<source>标签。此标签指定视频文件格式的来源，在这种情况下为MP4。
src属性指定了视频文件的路径，而type属性指定了视频文件的类型。这样，浏览器可以选择正确的格式来播放视频。
如果浏览器不支持<video>标签，则显示<video>标签之间的文本；这是一个可选的后备文字。
重要的是要注意，视频文件的路径必须是有效的URL。如果视频文件托管在您的服务器上，则可以使用相对URL，例如path/to/video.mp4。如果视频文件托管在第三方服务器上，则必须使用绝对URL，例如https://www.example.com/path/to/video.mp4。
为跨浏览器兼容添加多个视频格式
要添加用于跨浏览器兼容性的多个视频格式，请在<video>标签内使用<source>标签。 <source>标签允许您以不同格式指定不同的视频文件，并且浏览器会自动选择播放视频的最佳格式。
这是如何使用此标签提供多种视频格式的示例：
<video width="320" height="240" controls>
<source src="path/to/video.mp4" type="video/mp4">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogv" type="video/ogv">
Your browser does not support the video tag.
</video>
在此示例中，使用了三个<source>标签，每个标签都指定了不同的视频格式：MP4，WebM和OGV。浏览器将尝试播放第一个视频格式，如果不兼容，它将尝试下一个视频格式，依此类推。这样可以确保视频将在大多数现代浏览器上播放。
重要的是要注意，所有浏览器版本可能不会支持某些视频格式。
同样重要的是要确保每个<source>标签中指定的视频文件都是有效且可访问的，因为浏览器仅在可访问视频时才播放。
另外，如果浏览器不支持视频标签，请包括后备文本；它将显示而不是视频。
您可以使用处理视频格式转换的Cloudinary或video.js之类的服务，并使处理跨浏览器的兼容性更容易。
使用CSS自定义视频播放器控件
视频播放器控件包含在<div>元素中，带有CSS的.vjs-control-bar。
这是如何更改控制条的背景颜色的示例：
.vjs-control-bar {
background-color: blue;
}
您还可以针对控制栏内的特定控制元素并自定义其外观。例如，您可以更改游戏/暂停按钮的颜色：
.vjs-play-control {
color: white;
}
您还可以使用CSS隐藏默认控件并创建自己的自定义控件。为此，您可以通过将显示属性设置为none：
来隐藏默认控件
.vjs-control-bar {
display: none;
}
然后，您可以使用HTML和CSS创建自己的自定义控件。例如，您可以使用<button>元素创建一个播放/暂停按钮，并使用CSS进行造型：
<button class="custom-play-button">Play</button>
.custom-play-button {
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
}
您也可以使用JavaScript使自定义播放按钮与视频交互。
注意：自定义视频播放器控件需要良好的CSS和JavaScript知识。控件的设计基于您正在使用的视频播放器。
另外，请确保在不同的浏览器中测试您的自定义控件，以确保它们在所有平台上看起来和功能正常。您可以使用预先构建的CSS库，例如video.js或plyr.js，可为视频播放器控件提供许多自定义选项。
网站上使用视频标签的示例
有很多方法可以在网站上使用HTML5 <video>标签。这里有几个例子：
1。产品演示：您可以在电子商务网站上使用此标签嵌入产品演示视频；这使用户可以在购买之前查看该产品。
<video width="320" height="240" controls>
<source src="path/to/product-demo.mp4" type="video/mp4">
<source src="path/to/product-demo.webm" type="video/webm">
Your browser does not support the video tag.
</video>
2。教程视频：您可以使用<video>标签在教程网站上嵌入教程视频。这使用户可以通过观看视频而不是阅读文本来学习新技能。
<video width="320" height="240" controls>
<source src="path/to/tutorial.mp4" type="video/mp4">
<source src="path/to/tutorial.webm" type="video/webm">
Your browser does not support the video tag.
</video>
3。背景视频：您可以使用<video>标签在登录页面上设置背景视频。这可能是吸引访问者注意并使网站更具吸引力的好方法。
<video width="100%" height="100%" autoplay loop muted>
<source src="path/to/background-video.mp4" type="video/mp4">
<source src="path/to/background-video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
4。视频广告：您可以使用<video>标签在网站上嵌入视频广告。这可能是通过网站获利并产生收入的好方法。
<video width="320" height="240" controls>
<source src="path/to/ad-video.mp4" type="video/mp4">
<source src="path/to/ad-video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
这些只是如何在网站中使用HTML5 <video>标签的一些示例。使用正确的方法和设计，您可以使用此标签来创建引人入胜的引人入胜的网站。
HTML5音频标签
HTML5 <audio>标签允许开发人员将音频文件轻松嵌入其HTML代码中，从而易于在任何网页上播放声音。使用此标签，您可以控制音频播放器的布局，添加自定义控件，甚至为跨浏览器兼容性提供多个音频格式。
在这里，让我们深入研究<audio>标签及其各种属性，并学习如何在网站上嵌入音频文件。此外，我将深入研究如何使用CSS自定义音频播放器控件，并提供现实生活中的示例，说明如何在网站中使用此标签以获得增强的用户体验。
音频标签及其属性的说明
使用<audio>标签，您可以控制音频播放器的布局，添加自定义控件，甚至为跨浏览器兼容性提供多种音频格式。
几个属性可用于控制音频播放器的行为和外观。 src属性用于指定音频文件的源，而controls属性将默认控件添加到播放器，例如play/暂停按钮，音量控制和进度栏。
preload属性用于指定应该如何加载音频，并且可以使用autoplay，loop和muted属性来控制音频的行为。
也可以在<audio>标签中包含多个<source>标签，以提供不同的音频格式，以供跨浏览器兼容。例如，您可能包括同一音频文件的MP3和OGG版本，允许浏览器自动选择并播放正确的音频格式。
使用音频标签嵌入网站上的音频文件
使用html5 <audio>标签将音频文件添加到网站上是一个简单的过程。这是如何完成的示例：
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
在此示例中，<audio>标签用于创建音频播放器，并添加controls属性以显示音频播放器的默认控件。此标签内部是一个<source>标签，用于以mp3格式指定音频文件的来源。
src属性用于指定音频文件的路径，而type属性用于指定音频文件的类型。这样，浏览器可以选择正确的格式来播放音频。
如果浏览器不支持<audio>标签，则将显示标签之间的文本。
另外，请注意，音频文件的路径必须是有效的URL，无论是托管在您的服务器上还是第三方服务器。
为跨浏览器兼容添加多个音频格式
为了确保可以在大多数浏览器上播放音频文件，提供多种音频格式很重要。 <source>标签允许您轻松执行此操作。通过在<audio>标签中使用多个<source>标签，您可以以不同格式指定不同的音频文件，浏览器将自动选择播放音频的最佳格式。
例如，您可以包括同一音频文件的MP3，OGG和WAV版本：
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
<source src="path/to/audio.ogg" type="audio/ogg">
<source src="path/to/audio.wav" type="audio/wav">
Your browser does not support the audio tag.
</audio>
以这种方式，浏览器将尝试播放第一个音频格式，如果不兼容，它将尝试下一个音频格式，依此类推。这样可以确保音频在大多数现代浏览器上播放。
值得注意的是，并非所有浏览器都支持所有音频格式，因此请确保包括广泛支持的格式。
确保每个<source>标签中指定的音频文件都是有效且可访问的，因为浏览器仅在访问文件时才播放音频。
您还可以在<audio>标签中包含一个后备文本，以防浏览器不支持音频标签，它将显示而不是音频。
此外，您可以考虑使用诸如Cloudinary之类的服务，该服务可以处理音频格式转换，并使处理跨浏览器兼容性更容易。
使用CSS自定义音频播放器控件
<audio>标签提供了用于在网站上播放音频的基本控件，但是您可以使用CSS自定义这些控件的外观。这是如何使用CSS更改默认音频控件的背景颜色的示例：
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
audio::-webkit-media-controls-panel {
background-color: #ff0000;
}
在此示例中，我们使用::-webkit-media-controls-panel伪元素来选择包含默认音频控件的面板。然后，我们使用background-color属性将面板的背景颜色更改为red。
请注意，以上CSS仅在基于WebKit的浏览器上工作，您必须将特定于供应商的伪元素用于其他浏览器。
您还可以使用CSS更改单个控件的外观，例如播放按钮，暂停按钮和音量控制。您可以使用::-webkit-media-controls-play-button，::-webkit-media-controls-pause-button和::-webkit-media-controls-volume-slider伪元素选择这些控件并使用CSS更改其外观。
网站上使用音频标签的示例
以下是如何在网站上使用HTML5 <audio>标签的一些示例：
1。背景音乐：您可以使用<audio>标签在网站上播放背景音乐。通过设置autoplay属性并隐藏控件，您可以为用户创建无缝的背景音乐体验。
<audio autoplay controls style="display:none;">
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
2。采访或播客播放器：您可以使用<audio>标签为面试或播客创建播放器。通过使用控件属性并使用CSS自定义外观，您可以为您的音频内容创建专业的播放器。
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-pause-button {
background-color: red;
}
要设置进度栏，您可以将此CSS添加到样式表：
audio::-webkit-media-controls-timeline {
background: linear-gradient(to right, blue, green);
}
视频和音频优化
视频和音频优化可确保您的多媒体内容快速加载，并在网站上顺利进行。这对于大型多媒体文件尤其重要，这些文件可能需要很长时间才能加载或可能无法在某些设备或浏览器上正确播放。优化视频和音频可能涉及使用适当的文件格式减少文件大小，并为跨浏览器兼容性提供多种格式。
在本节中，我将讨论各种技术和最佳实践，以优化您的视频和音频内容，以确保它快速加载并在网站上顺利进行。这可以包括压缩视频和音频文件，使用自适应流以及使用内容交付网络。
视频和音频文件格式及其相对优点
有几种可用于Web Multimedia的视频和音频文件格式，每种都具有一组优势和缺点。这是一些常见的文件格式及其相对优点：
mp4（H.264/avc）： mp4是一种流行的视频文件格式，使用H.264视频编解码器和AAC音频编解码器。它得到了大多数现代浏览器和设备的支持，并提供良好的视频质量和较小的文件大小。
WebM（VP8/VP9）： WebM是一种开源视频文件格式，使用VP8或VP9视频编解码器以及Vorbis或Opus Audio Adcocec。它得到了大多数现代浏览器的支持，但并非所有设备。 WebM文件的大小往往比MP4文件小，但是视频质量可能不那么好。
ogg（theora/vorbis）： ogg是一种开源视频和音频文件格式，使用Theora视频编解码器和Vorbis音频编解码器。它得到了一些现代浏览器和设备的支持，但不像MP4或WebM那样广泛。 OGG文件的大小往往比MP4或WebM文件小，但是视频和音频质量可能不那么好。
mp3： mp3是一种流行的音频文件格式，使用有损失的压缩算法来减少文件大小。它得到了大多数现代浏览器和设备的支持。它具有良好的音频质量，但不是开源格式。
ogg（vorbis）： ogg是使用Vorbis音频编解码器的开源音频文件格式。它得到了一些现代浏览器和设备的支持，但不像MP3那样广泛。 OGG文件的大小往往比MP3文件小，并且音频质量可能更好。此外，OGG文件还可以更好地支持元数据，并且可以处理比MP3更多的频道和样品率。
wav： wav是一种使用大量磁盘空间和带宽的无损音频文件格式。大多数现代浏览器和设备都支持它，并且具有很好的音频质量。
注意：并非所有设备和浏览器都支持所有文件格式，因此最好提供视频或音频文件的多种格式，以确保它将在大多数设备和浏览器上播放。<
选择视频和音频文件格式时，重要的是要考虑文件的质量，与不同浏览器的兼容性以及文件大小。考虑格式是开源还是专有的也很重要。
优化视频和音频文件用于网络使用的最佳实践
可以遵循几种最佳实践，以优化视频和音频文件以供网络使用：
压缩文件：压缩视频和音频文件可以大大减少文件大小而不会牺牲过多的质量。有几种工具可用于压缩视频和音频文件，例如用于视频的Handbrake和Audacity的音频。
使用自适应流：自适应流是一种基于查看器的网络条件实时调整视频或音频流的质量的技术。这样可以确保视频或音频将在各种设备和网络条件下顺利进行。
使用内容输送网络（CDN）： CDN是全球分布的服务器网络。通过使用CDN，您可以确保将视频和音频文件从地理上接近它们的服务器中提供给观众，这可以大大减少加载时间。
使用对Web友好的编解码器：一些codecs（例如H.264）作为视频或AAC进行音频，比其他网络更友好。大多数现代浏览器和设备都广泛支持编解码器。
使用渐进下载而不是流媒体：渐进下载是一种允许视频或音频文件开始下载后立即播放的技术。这是较短视频或音频文件的好选择，因为它消除了对流服务器的需求。
压缩视频和音频文件，用于更快的加载时间
压缩视频和音频文件，以获取更快的加载时间
有几种方法可以压缩视频和音频文件以使其更快地加载时间：
视频压缩：压缩视频文件的一种方法是使用视频转编码工具，例如Handbrake。 Handbrake可用于将视频文件从一种格式转换为另一种格式，它还允许您调整各种设置，例如视频比特率，帧速率和分辨率，以减少文件大小。其他工具，例如FFMPEG，Adobe Media编码器或压缩器也很受欢迎。
音频压缩：您可以使用音频编辑工具（例如Audacity）来压缩音频文件。 Audacity允许您调整音频文件的比特率和采样率，以减少其文件大小。其他工具，例如iTunes，lamexp和iTunes也很受欢迎。
在线压缩服务：也有几种在线压缩服务可用于压缩视频和音频文件。这些服务通常提供一个用户友好的界面，并允许您直接从网络上传和压缩文件。一些流行的在线压缩服务包括Cloudinary，Kraken.io和Tinyjpg。
在压缩视频和音频文件时，找到文件大小和质量之间的正确平衡很重要。降低比特率过多会导致视频或音频质量不高，同时保持太高会导致更大的文件尺寸。同样重要的是要注意，不同的编解码器可能具有不同的压缩效率。例如，H.264编解码器比VP9更有效。
最好的做法是在不同的设备和网络条件上测试您的压缩视频和音频文件，以确保它们顺利进行并且没有任何问题。
可访问性
可访问性是要确保每个人都可以使用和享受您的网站，而不管他们的能力如何。在视频和音频方面，这意味着确保即使看不见或听到的人仍然可以访问和理解内容。
在本节中，我将讨论确保您的视频和音频可访问所有人的方法。这可以包括添加字幕，字幕和音频描述，并提供访问内容的替代方法。重要的是要记住，可访问性不仅是法律要求，而且要确保每个人都可以从您的网站上受益也是正确的事情。
多媒体元素中可访问性的重要性
多媒体元素中的可访问性对于确保包括残疾人在内的每个人都可以访问和理解内容至关重要。这很重要，原因有几个：
法律合规性：有法律和法规，例如《美国残疾人法》（ADA）和《康复法》，要求残疾人可以使用网站。无法使您的多媒体元素可访问可能会导致法律行动和罚款。
包含：通过使您的多媒体元素可以访问，您可以确保每个人，无论他们的能力如何，都可以访问和使用您的网站。这促进了包容性并有助于创建一个更多样化和包容性的在线社区。
更好的用户体验：使您的多媒体元素可访问可改善残疾人的用户体验。例如，将字幕添加到视频中可以使聋哑人或难以听见的人可以访问它，同时添加音频说明可以使盲人或视力障碍的人可以访问它。
搜索引擎优化：使您的多媒体元素可访问也可以通过使搜索引擎了解多媒体元素的内容来改善搜索引擎优化（SEO）。
更广泛的受众：通过使您的多媒体元素可以访问，您可以吸引更多的受众，包括残疾人，他们可能无法访问您的内容。
在视频中添加封闭的字幕和字幕
手动创建字幕或字幕：
您可以通过在视频中添加文本文件来手动创建字幕或字幕。该文本文件包含特定格式的字幕或字幕，例如SRT或VTT。然后可以使用<track>标签中的<track>元素与视频关联文本文件。
<video>
<source src="path/to/video.mp4" type="video/mp4">
<track src="path/to/captions.vtt" kind="captions" srclang="en" label="English">
</video>
将音频说明添加到视频
手动创建音频说明：
您可以通过录制描述的画外音并将其同步视频来创建音频说明。这可以使用视频编辑软件或数字音频录音机完成。然后，可以使用background-color标签中的<track>元素与视频相关联。
<video>
<source src="path/to/video.mp4" type="video/mp4">
<track src="path/to/audio-description.mp3" kind="descriptions" srclang="en" label="English">
</video>
使残疾用户可以访问视频和音频
确保每个人都可以访问您的视频和音频很重要，尤其是对于残疾人。以下是一些最佳实践，以确保您的多媒体内容包含在内：
包括字幕和字幕：聋哑人或听力难的人依靠字幕和字幕来理解视频中的音频。字幕应包括声音效果，字幕应仅包括对话。
添加音频说明：对于那些盲人或视力障碍的人，音频说明口头说明屏幕上发生了什么。确保描述与视频同步并且易于理解。
提供访问内容的替代方法：有些人可能无法看到，听到或与传统形式的多媒体形式进行互动，因此提供访问内容（例如转录或摘要）的替代方法很重要。
确保与辅助技术的兼容性：确保您的视频和音频在辅助技术（如屏幕读取器或封闭的字幕设备）中很好地运行。
包括控件和选项：用户应控制视频和音频播放，并具有调整设置（例如封闭字幕和音频说明）的选项。
测试您的内容：在不同的设备和浏览器上测试您的内容，并确保它与辅助技术合作。
保持导航简单：使用户可以轻松找到和访问网站上的多媒体内容。
结论
总而言之，此博客文章教会了我们如何使用HTML5标签添加视频和音频，使用CSS自定义播放器控件，使多媒体可访问以及优化用于Web使用的文件。我希望您能发现它有益，并且有助于创建包容性，引人入胜且优化的网站。切记遵循最佳实践以进行可访问性和优化，以为所有用户提供更好的体验。
资源
HTML5 Video Tag Guide
Style the HTML 5 Audio
Video Optimization Guide For Your Website
Optimize Your Website for Audio
Design an Accessible Website
@fatimaola和hackmamba squad，感谢您执行详尽的审查，并对草案做出了有见地的反馈。
在Twitter @nelo_cg
上关注我