正如您在图片单元中所了解到的,借助 HTML,您可以将媒体嵌入到网页中。在本部分中, 我们会研究音频和视频文件,包括如何嵌入它们、用户控件、为视频提供静态图片占位符, 包括使音频和视频文件可供访问。
<audio>
和<video>
<video>
和 <audio>
元素可用于通过 src
属性直接嵌入媒体播放器,也可用作一系列 <source>
元素的容器元素,
每个文件都提供 src
文件建议。虽然 <video>
可用于嵌入音频文件,但 <audio>
元素更适合用于嵌入。
声音文件。
起始 <video>
和 <audio>
标记可以包含几个其他属性,包括
controls
、autoplay
、loop
、mute
、preload
和全局属性。<video>
元素还支持 height
、width
和
poster
属性。
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
此 <video>
示例包含一个具有 src
属性且链接到视频来源的来源。poster
属性
用于提供在视频加载时显示的图片。最后,controls
属性提供用户视频控件。
后备内容包含在开始和结束标记之间。如果用户代理不支持 <video>
(或 <audio>
),则会显示此内容。即使两者之间没有内容,也必须使用 </video>
结束标记
(但应始终有后备内容,对吧?)。
如果起始 <video>
或 <audio>
标记中未包含 src
属性,请添加一个或多个 <source>
元素,
每个文件都具有媒体文件的 src
属性。以下示例包含三个媒体文件选项:后备内容
并在开始和结束标记之间添加英语和法语字幕。
<video controls poster="images/machine.jpg">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
每个 <source>
子级都包含指向该资源的 src
属性,而 type
属性会通知浏览器
链接文件的媒体类型。这样可以防止浏览器
因为无法提取媒体文件。
在 type
属性中,您可以添加一个 codecs
参数,
用于指定资源的编码方式。编解码器让你能够添加尚不支持的媒体优化
。编解码器与媒体类型用英文分号分隔。例如,可以使用
直观的语法,例如 <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">
,它指示
WebM 文件包含 VP8 视频和 vorbis 音频。编解码器也可能更难解密,例如 <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">
表示 MP4 编码为 Advanced Video Coding Main Profile Level 4.2。解释这一语法远远超出了
本课程的讨论范围。Jake Archibald 有一个帖子,其中解释了如何确定 AV1 视频的编解码器参数
。
默认情况下,在播放视频时,视频的第一帧会作为静态画面显示(当视频可供播放时)。
这是可以控制的。借助 poster
属性,可在视频下载时显示图片来源
一直持续到播放完毕如果视频在播放后又暂停,则系统不会重新展示海报。
请务必指定视频的宽高比,因为在加载视频时,尺寸差异 会导致重排和重绘。
始终添加布尔值 controls
属性。这使得用户可以控制
可见,让用户能够控制音量、将视频完全静音以及将视频展开至全屏。
省略 controls
会导致糟糕的用户体验,尤其是在包含布尔值 autoplay
属性的情况下。请注意,
如果省略了布尔值 muted
属性,浏览器将不会留意 autoplay
属性指令,因为自动播放
一般来说,即使静音且带有可见控件,媒体文件也会导致糟糕的用户体验。
曲目
在音频和视频的开始和结束标记之间,添加一个或多个 <track>
元素来指定定时文本轨道。以下示例包含两个 <track>
文件,分别提供英语和法语的定时文本字幕。
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />
在 src
属性中指定的跟踪文件应采用 WebVTT 格式 (.vtt)。
这些文件应与 HTML 文档位于同一网域,除非 crossorigin
属性。
跟踪 kind
属性有五个枚举值:subtitles
、captions
、descriptions
、chapters
和其他 metadata
。
添加 subtitles
以及用于对话转录和翻译的 srclang
属性。每个 label
属性的值
显示为选项所选 VTT 选项的内容会显示在视频上。外观
您可以通过定位 ::cue/ ::cue() 来设置字幕样式。
值 kind="caption"
应保留以用于包含音效和其他相关音频信息的转录和翻译。
这不仅适用于耳聋的观看者。或许用户找不到自己的耳机,因此打开了字幕。也可能没有
能听清喜爱的播客中的最后几个谈话要点,所以他们想看看转写文稿以确认自己的理解。
通过其他方式访问音频和视频内容既重要又方便。
kind="description"
用于为无法看到视频的用户提供对视频中可视内容的文字说明,无论他们是
他们使用的是没有屏幕的系统(例如 Google Home 或 Alexa),或者是盲人。
提供字幕 WebVTT 格式可让拥有 听力受损请记住,残疾是个人与其当前环境不匹配造成的。听力受损可能的原因 用户身处嘈杂的环境中、音响设备发生故障或耳机损坏,或者用户听力减退或 又失聪了。确保内容易于访问能够帮助更多人,他们远超你的想象;它可以帮助每个人。
后台视频注意事项
您的营销或设计团队可能希望您的网站包含背景视频。一般来说,这意味着用户希望静音 自动播放且循环播放的视频,没有控件。HTML 可能如下所示:
<video autoplay loop muted poster="images/machine.jpg" role="none">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
</video>
背景视频无法访问。在未向用户提供完整信息的情况下,不得通过背景视频传达内容
控制播放和访问所有字幕。由于此视频纯粹是为了装饰,因此使用了 ARIA 角色
为 none
,并省略所有后备内容。
若要改善始终静音的视频的性能,请从媒体来源中移除音轨。
如果您的视频播放时长未超过 5 秒,那么无障碍指南不要求设置暂停机制,
具有布尔值 loop
属性的回调会默认无限循环,且会超过这个五秒或任何其他时间限制。健康
用户体验时,一定要提供暂停视频的方法。添加 controls
是最简单的方法。
自定义媒体控件
如需显示自定义视频或音频控件(而不是浏览器内置控件),请添加 controls
属性。然后使用
用于添加自定义媒体控件并删除控件属性的 JavaScript。例如,您可以添加 <button>
,用于切换
音频文件的播放状态。
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
此示例包含一个具有 dataset
属性的按钮,其中包含随着访问者切换而更新的文本
在播放和暂停状态之间转换aria-controls
属性包含在由按钮控制的元素的 id
中;
在本示例中是音频每个控制音频的按钮都有一个事件处理脚本。
若要创建自定义控件,请使用 HTMLMediaElement.play()
和
HTMLMediaElement.pause()
。切换播放状态时
还可以切换按钮文字:
const pauseButton = document.getElementById('playPause');
pauseButton.addEventListener("click", pauseAndPlay, false);
function pauseAndPlay() {
console.log(this);
const media = document.getElementById(this.getAttribute('aria-controls'));
if (media.paused) {
media.play();
this.innerText = this.dataset.pauseText;
} else {
media.pause();
this.innerText = this.dataset.playText;
}
}
通过添加 controls
属性,即使 JavaScript 运行失败,用户也能控制音频(或视频)。
请仅在替换按钮实例化后移除控件属性。
document.querySelector('[aria-controls]').removeAttribute('controls');
在用户无法访问控件时始终添加外部控件,例如对于隐藏了控件的背景视频
隐藏在网站内容之后了解媒体无障碍功能要求的基础知识非常重要,以方便用户使用
不同的环境和感官需求,其中包括数百万听障和视障人士。
我们刚刚接触了 HTMLMediaElement
,它提供了由
HTMLVideoElement 和
HTMLAudioElement,其中 HTMLMediaElement
添加了一些属性,
方法和事件。还有一些其他 Media API,
包括 TextTrack API。您可以使用媒体捕获和流式传输
和 MediaDevices API(用于通过用户麦克风录制音频)
或录制用户的屏幕。Web Audio API
支持操纵直播和预先录制的音频,以及流式传输、保存音频或将音频发送到 <audio>
元素。
检查您的理解情况
测试您对音频和视频知识的掌握情况。
<track>
元素的用途是什么?
poster
属性控制哪些内容?