由于我们知道将图像添加到 HTML 页面的细节，是时候学习如何使用其他 HTML 媒体类型了。本课程涵盖如何将视频和音频内容嵌入网页、为视频添加字幕/字幕、防止自动播放等的基本知识。
<video> 标签
我们使用 HTML<video>元素在网页上显示视频。与<img>标签一样，<video>标签要求src属性包含指向视频源的链接。它还包括设置视频框宽度和高度的属性。与<img> 标签不同，<video>元素需要开始和结束标签。
在开始和结束视频标签之间插入文本“不支持视频”。仅当您的浏览器无法加载视频时，才会显示此文本。
控件属性
自行播放而没有任何暂停或退出选项的视频是一场噩梦。更糟糕的是，它会引发癫痫发作、惊恐发作或偏头痛。为了避免这些最坏的情况，开发人员使用标签controls内的属性。<video>此属性允许用户通过提供播放、停止或暂停视频以及调整其音量的选项来控制视频播放器。
宽度和高度属性
width和属性分别定义视频的height垂直和水平尺寸。如果没有它们，页面可能会在视频加载时闪烁，至少会导致用户感到沮丧。请记住，默认情况下以像素为单位定义测量值，因此无需手动指定它们。
视频的 <source> 标签
有 2 种方法可以指定要嵌入的媒体的路径。最简单的是使用 标签src 内的属性 。<video>但是，有时您希望为多种文件格式提供替代来源，以提供与各种浏览器的兼容性。在这种情况下，请使用 标签<source> 内每种格式的元素 。<video>对于每个来源，您需要指定具有所需 src 属性的 URL。
您还想添加该 type 属性以让浏览器知道嵌入的媒体类型（也称为 MIME 类型）。
对于视频内容，语法可以是：
视频/ogg
视频/mp4
视频/网络
自动播放属性
进入页面后，该autoplay属性会自动播放视频。它进入<video>以下标签width和height属性中。
虽然自动播放视频可以提高转化率，但它们对普通用户来说非常烦人，对残障人士来说也很危险。autoplay在添加属性之前请三思。此类媒体会引发癫痫发作和其他身体反应，使网站完全令人反感。
静音属性
如果在您的网页上自动播放广告是吸引用户注意力的必然方式，那么有一个健康的解决方案 -muted属性。与该autoplay属性一起，视频将开始播放，但缺少声音会使其不那么突兀。将muted属性放在autoplay属性之后。
HTML 支持的视频格式
最新的 HTML5 版本支持 3 种格式（MP4、WebM 和 Ogg）的视频显示，这些格式可以在现代浏览器中本地运行。不幸的是，它们都不能在所有浏览器中完美运行，因此您必须找到至少两个的组合才能获得有意义的 HTML5 视频支持。
<track> 标签
字幕或隐藏式字幕只会带来好处。它们允许用户在办公室、图书馆或公共交通工具等对声音敏感的环境中观看视频。此外，它们还增加了可访问性，为有听力障碍的用户提供视频内容。
那么我们如何为视频添加字幕呢？自闭合<track> 标签指定字幕、字幕文件或其他包含应伴随播放媒体的文本的文件。对于此标签，开发人员使用 WebVTT 格式的文件（.vtt 文件）。
<audio> 标签
就在几年前，添加音频文件还不是那么容易。在 HTML5 发布之前，没有标准来定义 Web 浏览器中的嵌入式媒体，例如音频。今天，您所要做的就是插入<audio> 元素并使用src属性指定文件源或使用元素指定多个文件源<source>。指定文件位置和音频属性后，请确保关闭<audio>标签并将其放在</audio>末尾。
<audio></audio>只有当浏览器在加载文件时出现问题时，才会出现“不支持音频”的短语。
控件属性
用户可能会在不同的情况下使用您的网站或产品，自动播放音频会极大地影响他们的印象和一般体验。播放音频和视频的选择应始终由用户驱动。确保包含该controls属性以允许用户随时管理音量、暂停和恢复播放。
音频的 <source> 标签
<source> 标签本身并不存在，并且始终是媒体标签的子标签<audio>。<video>它允许您添加一些文件源，以便浏览器可以选择<source>它支持的第一个。标签本身并未定义所有文件位置。相反，它包含src指定音频或视频的 URL 地址的属性。
与<video>元素一样，该type属性定义了浏览器支持的常见媒体类型。
对于嵌入音频文件，您应该使用以下语法：
• 音频/ogg
• 音频/mpeg
自动播放属性
想象一下，当您在公共交通工具、图书馆或医院时，进入一个带有背景音乐的页面。您可能会感到震惊，并且可能会头也不回地离开页面。如果您仍考虑添加该autoplay 属性，请确保用户可以控制媒体播放并将其关闭或暂停。
静音属性
与<video>元素一样，该muted 属性确保浏览器加载页面后音频是无声的。最终，该属性减轻了自动播放音乐的影响，并允许用户自行决定何时播放和收听音轨。
loop一旦视频或音频结束，该属性会自动重新启动媒体。
HTML 支持的音频格式
HTML 支持 3 种音频格式：MP3、WAV 和 OGG。但是，并非所有浏览器都能正确呈现每种媒体类型。例如，Safari 不会加载扩展名为 .ogg 的文件。在这种情况下，您应该有一个计划 B 并提供 MP3 或 WAV 文件。
嵌入 YouTube 视频
这是在您的网站上嵌入视频的最简单和最受欢迎的方法之一：
1. 将视频上传到 Youtube
2.复制HTML代码，点击分享按钮即可找到
3.<iframe>在你的网页中定义一个元素
src4 、在HTML文档的属性中插入代码
你都准备好了！与任何其他视频文件一样，您可以自定义 Youtube 视频并设置其宽度和高度。此外，您可以添加autoplay=1 和mute=1到 Youtube URL，让您的视频自动开始播放。
使用自动播放属性
autoplay一旦浏览器加载页面，该属性就会启动音频或视频文件。它遵循src 属性并且可以与muted属性串联。如果您决定使用autoplay，则必须包含控件以防止给用户带来不愉快的意外。
请记住，如果出现以下情况，许多浏览器会阻止自动播放媒体：
• 其音量未静音或静音为 0
• 用户尚未以任何方式与站点进行交互（通过单击、敲击或按键）
• 您的网站不在白名单上
有时，用户手动定义白名单，或者如果用户经常与媒体互动，浏览器会自动添加您的网站。
.mp3 音频格式
确保正确的媒体格式；否则，浏览器将根本不会呈现文件！如果是音频文件，HTML 接受 MP3、WAV 和 OGG。对于视频文件，大多数浏览器都支持 MP4、WebM 和 OGG。
添加 <track> 元素
使用<track>元素，您可以同时做 2 件好事。首先，即使在医院或图书馆等对声音敏感的环境中，字幕也允许用户访问视频内容。
其次，字幕有利于听力和认知障碍的用户，使他们可以按照自己的节奏阅读音频或视频文本。此外，字幕还可以描述声音效果（如咳嗽或敲门），帮助观众理解含义。
以上内容为转载
网友评论