在本部分中,您将学习如何使用 <video>
和 <source>
标记在网页中嵌入媒体文件,如何为听障人士向视频添加字幕,以及使用媒体框架的一些常规概念。此外,您还将了解如何使用预加载加快播放开始速度,我们将讨论如何构建一个名为 Kino 的更新版演示版 PWA,该 PWA 具有离线自适应流式传输功能。
本部分假设您有一个准备好嵌入到网页中的视频文件。从相机下载的 .mov
文件无法使用。如果您只有这些,请参阅为网站准备媒体文件,然后返回。
本部分将介绍这些主题。
- 在<video> 和 <source> 标记中,您将具体了解如何在网页中嵌入媒体文件。
- 在媒体无障碍功能部分,您将学习如何为听障人士向媒体文件添加字幕。
- 在媒体框架中,您将学习使用 Shaka Player、JW Player 和 Video.js 等媒体框架的基础知识。
- 在通过音频和视频预加载加快播放速度一文中,您将了解如何通过主动预加载资源来加快媒体播放速度。
- 在支持离线流式传输的 PWA 中,您将了解我们如何构建一个经过更新的演示版 PWA,该 PWA 无需使用框架即可实现自适应流式传输和离线播放。此外,您还可以玩转源代码。
本部分包含大量内容,首先,请了解如何使用 <video> 和 <source> 标记。