42、利用多媒体提升网站体验

利用多媒体提升网站体验

1. 项目背景

Maxine Michaels运营着电影博客“Cinema Penguin”，该博客包含好莱坞黄金时代经典电影的评论、文章和故事。她希望通过添加著名电影片段的音频和视频剪辑来提升网站的用户体验。她请求帮助开发一个示例页面，介绍1951年的经典电影音乐剧《皇家婚礼》，该电影由弗雷德·阿斯泰尔和简·鲍威尔主演。Maxine已收集了该电影的音频和视频剪辑，并希望将其添加到页面中。页面还包含一篇短文，描述了电影中一个著名的特效，即阿斯泰尔似乎在天花板上跳舞，Maxine希望使用CSS动画样式来展示这种效果是如何实现的。

2. 学习目标

本次学习分为三个阶段，具体目标如下：
| 阶段 | 目标 |
| ---- | ---- |
| 阶段8.1 | 理解音频和视频格式；插入HTML音频剪辑；支持多种音频格式 |
| 阶段8.2 | 插入HTML视频剪辑；编写视频字幕轨道；格式化视频字幕 |
| 阶段8.3 | 创建CSS过渡；探索过渡属性；创建CSS关键帧动画；应用CSS动画 |

3. 多媒体在网络中的发展

最初，网络和HTML的目的是通过相互连接的超文本文档传递文本信息，是学术研究人员共享文本和数据的理想工具。随着HTML语言添加了图形功能，开发者可以创建带有图像和醒目页面布局的文档，为商业和商务开辟了网络潜力。接下来，HTML引入了多媒体支持，包括流式音频、视频和交互式游戏，使网络成为主要的娱乐平台。预计到2019年，在线视频将占全球互联网流量的80%，仅在美国就将上升到85%。因此，网页开发者需要考虑如何最好地利用多媒体，使他们的网站对公众更具吸引